Anton's Research Ramblings

Interpolation Functions aka "Tweening" or "Easing"

In visualisation and games we often have animated transitions of visual elements. This could be an actor walking between two points, or a menu button moving into place, or a perhaps chart transitioning to a new data set. Most of the transition animations are fluff - they provide no intrinsic value whatsoever, but appear pleasing to the user/audience. And there is value in that, lots of value. Arguably these transitions are more important to animations which only store "key frames" and expect real-time animation to interpolate between these as required. On St Patrick's Day holiday I spent some time looking into this and making my own interpolation library.

There is a lot of dubious-quality literature around on this topic, which very much reads like a bad re-invention of really basic mathematical functions. A quick google on "easing functions" or "tweening" [cringe] will give you a slice of this. There are some nice, animated, examples at easings.net. I wanted to use some similar functions in my own projects to add some glitter value, but I immediately found some problems with the available resources:

With these considerations I decided to just make my own little collection of interpolation functions. I immediately threw out most of the package of "easing" functions, and only implemented the few that I thought would provide obvious and interesting transitions. Rather than copy the common functions from some library, I just approximated them with as simple as possible pure maths functions, and as little logic as possible. I replaced all the unusual input parameters with current x, initial x, final x, initial y, and final y, the way we would define these things in my mechanics education.

I started with the above, simple functions, which are pretty similar to the "easing" set, and modelled them in gnuplot to see if they looked okay. Then I smashed them into some simple C functions with my basic parameters. The code is available on GitHub. I tried it out for a title animation in my Crongdor the Barbarian game, and it looked pretty good. I wanted the title to drop down, and then bounce, as if hitting a surface. Rather than use a fixed-size lead-in, as in the easing functions, I just did an exponential interpolation (like gravity) between start height, and end height, then a bounce interpolation, which for me is like a linearly diminishing absolute sine wave.