Animations (Basic)

hairui lin
Sep 6, 2018 · 3 min read

Today, i will write a post about basic animations.

Ways of changing animation for a UIView

Before we dive into the ways of changing animation for an UIView, we have to understand first that CALayer is responsible for almost all the general animations we see in iOS. UIView merely acts as a wrapper and provides some other functionalities that CALayer does not have. For example, touch listeners.

Whenever an animation is required, CALayer searches through the following steps to find an appropriate animation for a particular key. (Most of the time animations are triggered when a property of a layer is changed and in this case, the key is the property’s keyPath, eg. “backgroundColor”. But we also can trigger animations on a self-defined key. More on that later)

  • It first detects if it has a delegate. And, if it does, it searches for the delegate implementation of -actionForKey function to return a CAAnimation object. If it does not have a delegate or the delegate returns nil, it goes to the second step
  • It searches for CAAnimation in the actions dictionary. The actions is a [String : CAAnimation] dictionary. It is nil by default. And if the CALayer does not find the corresponding CAAnimation in actions dictionary, it goes to the third step
  • It will try to find CAAnimation in the style dictionary. Usually, we should not concern ourselves with this step. If it does not find the CAAnimation in this dictionary, it goes to the fourth and the last step.
  • It will try to find an animation in the defaultActions dictionary. And if all fails, it returns a nil, indicating that there is no animation to be performed.

In a UIView, however, everything stops at the first step, because the default -actionForKey returns a <null> value rather than a nil. Thus, no further search is done. Also, the defaultActions’ animations are disabled in UIKit. Only when inside a UIView.Animation block, would the animations be enabled.

Therefore, if we wish to implement a custom animation, we only have the options of

  • subclassing the UIView and override the actionForKey function (will not be talked about in this post)
  • adding an explicit animation to the under lying layer
  • use the UIView.Animation block

Adding explicit animations

In this post, i will demonstrate how to add an explicit animation and what is the advantage of this method over UIView.Animation block.

Adding explicit animations is easy in swift. For example, let’s say we wish to animate the changing of backgroundColor of an existing view, we can write the codes as shown in the following gist:

In 1: we create a random color

In 2: we create a CABasicAnimation for animation.

In 3: we set the view’s backgroundColor to the color to the random color we have created earlier. This is equivalent to setting the final model value of the view’s backing layer.

In 4: we add the animation to the animation stack, which then performs the animation.

And that is about it. However, this simple explicit animation can be achieved using a simple UIView.Animation block, too:

Explicit Animation vs UIView.Animation Block

Most of the time, i think UIView.Animation block is sufficient enough to provide us with the animations we need. It is a very convenient and it also provides a timing parameter (easing). This saves us tons of time from configuring manually on an explicit animation.

But there are other times that we would want to implement explicit animations.

  • When the animation needs to be repeated on multiple UIView objects. For this case, we can create just one explicit animation object and add it, using add(animation) function, to whichever UIView we would like. One thing to note is that the animation object once added to a layer is treated as copy of the original animation object. Therefore, if we make changes to the original animation object after it is added to a certain layer, no changes in animation will be shown in the layer.
  • When we want much more control on the animation. One such example would be use of CAKeyFrameAnimation.
  • When we want animation that does not involve layer’s properties.

For example, when we would like to do a transition when the image of an UIImageView changes: