Easing functions for your animations

Today’s design guidelines state that all animated movement inside your application should contain so called easing. You can read this section from google material design. If your UI-framework does not contain implementations for standard set of easings you can create your own.

Easing functions

Easing functions

Here is place where you can check out animated plottings for basic easing functions. And here you can find source code for them in several languages (JS,Java,Lua,C#,C++,C).

C++ code for elastic easing (from here):

Input parameters here:

  • t – time elapsed from start of animation
  • b – start value
  • c – value change
  • d – duration of animation

There is nice online tool – Easing function generator. It generates polynomial functions as approximation. For example, elastic easing can be approximated:

In my framework i use easing formulas in more simple way. Instead of four parameters i use one! Easing can be described as time transformation f(t) -> t, which can be applied to multiple values at the same time. Also this gives a bit more clean formulas. Input time is in range [0.0..1.0], but output can exceed these values.

Here is an example for CircOut easing:

And base animation class could contain something like this:

So the point is that easing is pretty easy.

ps. Don’t make your animations too long to annoy your users. Don’t make too many animations everywhere to defocus your users. Make animations so your users can better understand your UI.