UIKit Animation (Part 2)

7 min readFeb 5, 2021

https://www.raywenderlich.com/5304228-ios-animation-tutorial-getting-started

In a previous blog we talked about how we can animate auto-layout constraint and saw different animation API. In this blog we will animate view properties to do some standard animation we already know, On previous blog we were calling layoutIfNeeded since we were mostly aimating autolayout, here we will animate view properties

Fade In / Fade Out

As shown in Gif 1 we created fade in and fade out animation using one view and by changing UIVIew animatable property which is alpha.

If we want to add a fade in and fade out animation between two images like that in Gif 2 , As you can see when user tap on button , the first image color clear and then we set image and change alpha property again.

I changed the image only, if you slow down this animation you can see the transition between two images is as follows, first there is a completely white and then alpha change what if we don’t want that white thing. Like in Gif 4

As shown in Figure 2 we did few things to do proper fade in / out animation on image change

We first created Temporary imageView with the same frame and content mode and image named which we want to show next
Place Temporary imageView on top of actual imageView
On the animation block, we change its alpha with animation
Finally, on completion, we remove Temporary imageView and set the next image to the actual imageView

As shown in Gif we combined fade in/out animation with position animation as well , As you can see in Figure 3 we animate the center y of temp imageview from down to up

Animatable Transform Property

Transforms modify views by adjusting size, rotation, and position. Modify this property within an animation block to animate the rotation, scale, and/or position of a view.

All of these animations are performed relative to the center of the view bounds

As shown in Figure 4 , we have an image some initial size 374 * 300, Now we want when user tap on the toggle button it’s size change to 374 * 600, means we want to double height of our imageView with animation

As shown in Gif 6 , and Figure 5, since we want same width we scale by 1 which means don’t change the width and for height we specify 2 which means scaled height * 2 (double) with animation

As shown in Figure 6, we double the height and also we adjust the center of the imageView to visible within the screen

Math Concept

Scaling → Where we increase or decrease object size. In scaling, we multiply a coordinate matrix with some scaling factor.

scaling factor → Decide how much to scale let’s say Sx = x direction scaling factor and Sy = y direction scaling factor

As shown in Figure 7 we did dot product between two matrices and result in the scaling transformation, Here we use Sx = 1, means not to scale width and Sy = 2 means double the height of image which I proved using formula as well

Note: An affine transformation matrix is used to rotate, scale, translate, or skew the objects you draw in a graphics context. The CGAffineTransform type provides functions for creating, concatenating, and applying affine transformations.
Affine transforms are represented by a 3 by 3 matrix: Because the third column is always (0,0,1), the CGAffineTransform data structure contains values for only the first two columns. In this we show you 2D example to undersatnd the concept

As shown in Gif 7 , the image view initial position is x = 20 , y = 150 , and when we did the translation transform animation , the imageview position change to x = 20 , y = 250 since we translate on y position y 100 points

Math Concept

Translation → Change the object position after it’s creation. Matrix addition/subtraction can be used to translate a figure without change it’s size or shape

Rotation →

Math

Here we calculated coordinated after it rotates by 45 degree clockwise,

Frame Vs Bounds

Consider Figure 11,

Frame is (100,210,175,100) with respect to it’s super view (view’s location and size using the parent view’s coordinate system)
Bounds = a view’s location and size using its own coordinate system (important for placing the view’s content or subviews within itself)
Initially both are the same

Now when we rotate by 45-degree view frame and bounds will not be the same
Bounds unchanged but frame changes
Red bordered is actually the frame

Reset Transform

What if we want to reset transform to it’s the original size, just set it’s transform to .identity to reset all the transformation animation. Note: .identity will work with all type of transform scale, rotate and translation

Cube Transition Animation (Concatenate Transforms)

There are few points need to cover

First we do a Concatenate transform here scale and translation, Note when defining Concatenate transform order is important
When we Concatenate transform or combine multiple transforms we get a single smooth animation
Reset multiple transform is as simple as resetting a single one
For cube transition animation first we created a temp label on top of the real label and position and scale down to it’s start state means temp label Initial height = actual height * 0.1 (means very small) and position is down to actual label height / 2
Added temp label to super View
On the animation block, we reset the temp label transform so it animates its height and position to real label and for the real label, we scale its height to 0.1 l and move up to a position height / 2 simuatenously
On final completion block we set new text to actual label and reset to position and height and remove temp label from superview

Note: for translation we did height / 2 instead of height , it’s eacuse transformation act around the view center so we only move it’s center. So when we scale down it scale towards its ccenter

As shown in Gif 11 and figure 15 , we perform transition between text using alpha and transform property. One thing to notice we added delay thing when we moving temp label in while moving out real label