Animate uilabel using CATransition animation

/ animation iOS, CATransition Animation, swift 4, UIView animation, Xcode / By
Swift Tutorial: Animate UILabel using CATransition animation

Animate UILabel using CATransition

Animations plays an important role in mobile app, as an app with animation looks more appealing with a cool design. We can animate any control inherited from UIView class in iOS SDK using different methodologies or classes provided within the iOS SDK. In this tutorial, we will learn how to animate uilabel using CATransition to achieve animation effect like counter increment and decrement. Though you can use, UIView animation methods like
UIView.animate(withDuration: 0.5) {
//animate your UILable
}
view raw Animation using UIView Animation.swift hosted with ❤ by GitHub
Using the above approach does not provide more control to the developer as the developer can write the code inside the animate block. Thus functionlity only limited to animate a UIView either by setting the properties like hidden, alpha or changing the frame.

Why to use CATransition

But the CATransition class provides a much more control of the animation. As this animation is applied to layer of the UIView. If you look at  the CATransition class, which has the properties type : This property tells what type of animation we want to apply. We can specify 4 types of animation

  1. kCATransitionFade
  2. kCATransitionMoveIn
  3. kCATransitionPush
  4. kCATransitionReveal
Default is fade.

subtype: This property tells what type of direction we want for our animation, its an optional property. These are also 4 types

  1. kCATransitionFromRight
  2. kCATransitionFromLeft
  3. kCATransitionFromTop
  4. kCATransitionFromBottom 
startProgress: Specify the progress of animation to begin at, value should be in range of 0 to 1. Example, default is 0 and animation starts from very beginning of transition. If the startProgress value set to 0.5 then the animation will start when transition is in the half way stage.endProgress: Simlar to startProgress, but it specify the progress of transition at which animation should stop. The value should be greater then startProgress and default is set to 1.

How to use CATransition animation on UILabel

1: Create a single view application project using xcode. Open “Main.storyboard”, and create an user interface as shown in the image below

Swift Tutorial: Animate UILabel using CATransition animation

2: Open “ViewController.swift” ,  and create IBOutlet, IBAction’s for the UILabel and UIButton’s respectively as shown here

//
// ViewController.swift
// CATransition-Example
//
// Created by Aman Aggarwal on 29/08/18.
// Copyright © 2018 iostutorialjunction.com. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var lblCounter: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func incrementCounter(_ sender: Any) {
}
@IBAction func decrementCounter(_ sender: Any) {
}
}
view raw ViewController-CATransition.swift hosted with ❤ by GitHub

3: Open “Main.storyboard” , and connect the IBOutlet and IBAction’s. Connect incrementCounter to “+” UIButton and decrementCounter to “-” UIButton.

4: Open “ViewController.swift” and add the below animation code as an extension.

//
// ViewController.swift
// CATransition-Example
//
// Created by Aman Aggarwal on 29/08/18.
// Copyright © 2018 iostutorialjunction.com. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var lblCounter: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func incrementCounter(_ sender: Any) {
}
@IBAction func decrementCounter(_ sender: Any) {
}
}
extension CALayer {
func bottomAnimation(duration:CFTimeInterval) {
let animation = CATransition()
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animation.duration = duration
animation.type = kCATransitionPush
animation.subtype = kCATransitionFromTop
self.add(animation, forKey: kCATransitionPush)
}
func topAnimation(duration:CFTimeInterval) {
let animation = CATransition()
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animation.duration = duration
animation.type = kCATransitionPush
animation.subtype = kCATransitionFromBottom
self.add(animation, forKey: kCATransitionPush)
}
}
view raw ViewController-CATransition.swift hosted with ❤ by GitHub

If you look at the animation code we have two functions,

i) bottomAnimation
ii) topAnimation

First, we create an object using CATransition class. Then assign the CAtransition object timingFunction property which control the speed of animation. Assign duration, type, subType and finally add the animation to the layer.

Both the codes had almost same code and the only difference is the “subType” specified for the animation direction. “bottomAnimation” function had direction for animation “from Top” as specified in “subType“property of the transition and “topAnimation” function had direction for animation “from Bottom” as specified in “subType“property of the transition.

Using the bottomAnimation and topAnimation

Now lastly use the function’s added to CALayer as an extension. Below is the code that shows how to use the “bottonAnimation” and “topAnimation” functions.  First, we will create variable named “counter”, which will act as our counter as it will be incremented and decremented when we click on “+” and “-” button’s respectively.
//
// ViewController.swift
// CATransition-Example
//
// Created by Aman Aggarwal on 29/08/18.
// Copyright © 2018 iostutorialjunction.com. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var lblCounter: UILabel!
var counter = 0
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func incrementCounter(_ sender: Any) {
lblCounter.layer.bottomAnimation(duration: 0.7)
counter = counter + 1
lblCounter.text = "\(counter)"
}
@IBAction func decrementCounter(_ sender: Any) {
if counter > 0 {
lblCounter.layer.topAnimation(duration: 0.7)
counter = counter - 1
lblCounter.text = "\(counter)"
}
}
}
extension CALayer {
func bottomAnimation(duration:CFTimeInterval) {
let animation = CATransition()
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animation.duration = duration
animation.type = kCATransitionPush
animation.subtype = kCATransitionFromTop
self.add(animation, forKey: kCATransitionPush)
}
func topAnimation(duration:CFTimeInterval) {
let animation = CATransition()
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
animation.duration = duration
animation.type = kCATransitionPush
animation.subtype = kCATransitionFromBottom
self.add(animation, forKey: kCATransitionPush)
}
}
view raw ViewController-CATransition.swift hosted with ❤ by GitHub

Where to go from here

In this tutorial, we learned about CATransition class and it’s properties. Benefit of using CATransition animation.  Also we, learned how add counter animation to UILable using CATransition animation.
Download source code for the tutorial from CATransition-Example