Recently I found myself wanting to change the timing of an animation. The standard easy-in, easy-out timing functions just weren’t “feeling” right. In this particular case I felt the animation needed to be more spring-like.

More precisely, I wanted this view to accerelate faster and brake slowly at the end. Not necessarily overshooting. “I’ll just use an overdamped spring animation.” — I thought.

Trouble is, this view was animating along a path — an arc. And this was done using a CAKeyFrameAnimation that works out of the box with paths. So CASpringAnimation was out of the picture.

Fortunately, all CAAnimation’s can be parameterized with a CAMediaTimingFunction. If we look at the graph for an overdamped spring, it will look something like this:

Since there’s no overshooting, we can mimic that graph using a cubic Bézier curve! These curves have been supported by CAMediaTimingFunction since its inception. We just need to find the right control points to pass to its initializer.

To do that, there’s this awesome website at cubic-bezier.com which lets you play around with the graph and tells you what the control points are. Pretty neat!

A now I have my spring-like animation along a path. 😎

PS: These custom cubic Bézier curves are also supported by UIViewPropertyAnimator.

Back to posts