15 Sep 2018

Swift Tutorial: Animate UILabel using CATransition animation

Swift Tutorial: Animate UILabel using CATransition animation

Animate UILabel 

Animations plays an important role in mobile apps as an app with animation looks more appealing with a cool design. We can animate any control inherited from UIView class i n iOS SDK using different methodoligies or Classes provided within the SDK. In this tutorial, we will learn how to use CATransition to animate our UILable like counter increment and decrement animation. Though you can use, UIView animation methods like


Using the above approach does not provide more control to the developer as the developer can write the code inside the animate block. Thus limited only 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

Step 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


Step 2: Open "ViewController.swift" ,  and create IBOutlet, IBAction's for the UILabel and UIButton's respectively as shown here


Step 3: Open "Main.storyboard" , and connect the IBOutlet and IBAction's. Connect incrementCounter to "+" UIButton and decrementCounter to "-" UIButton.

Step 4:
Open "ViewController.swift" and add the below animation code as an extension.

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

1) bottomAnimation
2) 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.

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

No comments:

Post a Comment