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 in 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.
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 propertiestype : This property tells what type of animation we want to apply. We can specify 4 types of animation
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
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
Create a single view application project using xcode. Open “Main.storyboard”, and create an user interface as shown in the image below
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,
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.