A look at UIView Animation Curves (Part 1)

So… The design team just asked you to make an animation sexier and you went pale. What did they mean? The situation then got more awkward as they started talking about key frames and animation curves.

Motion graphics applications offers a lot of flexibility and to a designer there may sometimes be an expectation that the same flexibility is found in Swift / Cocoa Touch. Of course we all know that Swift is awesome and everything is possible but let’s stick to the basics.

When it comes to UIView animations, we find the following curve presets:

enum UIViewAnimationCurve : Int {
 case EaseInOut
 case EaseIn
 case EaseOut
 case Linear
}

To try these out, I will apply a simple scale transform to a UIView with rounded corners.

The GIF animation below show our UIView scaling up. To the left of it, we see the curve where the y-axis represents the scale transform while the x-axis represents time. The 1 second animation has been slowed down to 2 seconds here to make it easier to grasp what is going on.

Linear

When a designer asks you to make an animation sexier, this is not what they mean. 😉 The linear curve is the simplest of the curves. For our scale animation, it causes it to end quite abruptly.

Ease In

Ease in bends the curve at the start. When applying it, our view will scale slower at the start and consequently faster towards the end. This curve is less ideal here. Since the scale starts at 0.0, the early transformation comes out as sub pixels which can’t be seen. Almost as if the animation just has a delayed start.

Ease Out

Instead of a scaling slower at the start, we now scale slower towards the end. This works better for our animation.

Ease In Out

When combining Ease In and Ease Out, we get an s-shaped curve which slows the animation both at the start and end. Since this is the default curve for a UIView animation, we can now refactor our code to this:

There we have it. But our design team is still not impressed so let’s have a look at a few more options.

Spring animations

Let’s give that a go:

Whoa! Our curve quickly goes off the chart and scales our view beyond 100% before it settles down. Let’s reduce the spring oscillation by increasing the damp ratio to 0.7.

Better. Now, you could of course argue that animating a blue circle will never quite please a designer so let’s look at a more advanced animation. Here I am using multiple spring animations. Each of them has a duration of 0.8 seconds and a damp ratio of 0.4.

Now this is one sexy animation and our spring animations impresses the design team. Mission accomplished!

In my next post, I will dig a bit deeper and explain what a key frame is and how they are used with UIView animations.