Image for post
Image for post

A look at UIView Animation Curves (Part 3)

Robert Gummesson
Apr 26, 2016 · 3 min read

In part 1, we had a look at the curves available to UIView animations.

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

While these are often good enough, you may find yourself in a situation where you want to define your own custom animation curve. Perhaps you are working with a designer who wants you to get an animation exactly right. This is where we hit a limit with UIView animations. We now need to look elsewhere.

Custom curves using Core Animation

Image for post
Image for post

OK, so the lower control point is set to the 5th vertical line and 20%. The upper control point is set to the 2nd line and 90%. We note down these values and lean back again.

Let’s translate that to Swift using Core Animation.

This code looks quite different from our earlier UIView animation based code. But in principle, it’s doing the same thing. We transform the scale from 0 to 1 and use a duration of a second, just as before. The fill mode and removed on completion flag is specified for the transform to remain on completion. Without it, it reverts back to a scale of 0. Also note that we have to apply the animation to a Core Animation layer (which we find on all UIViews).

Let’s have a look at our animation. The curve here may look slightly different due to the aspect ratio but it’s more or less identical.

Image for post
Image for post

It can be quite tricky to draw custom curves without access to motion graphics software. Just feeding Core Animation code random input won’t get you too far. To make the process easier, I have prepared a playground which will enable you to see the curve while running the animation (see the bottom of this post).

If you are unfamiliar with cubic bezier curves, let us finish up by having a quick look under the hood. This animation illustrates how our curve was constructed using the two control points we noted down earlier:

Image for post
Image for post

Wrapping up

Update

The above code will override the UIView animation curve with our custom curve. I recommend reading this post for further info on CATransactions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store