Chris Vanrensburg has created a curve explorer that gives you a nice visualization of curve functions which are used for animations (easing and the like).
Chris has more:
I looked at the work of Robert Penner, since it seems to have become the gold standard for motion curves. Nice stuff, and it inspired me. I wanted to see if I could take things a step further – ratchet it up a notch. What I ended up with is something I’m quite pleased with for a first pass at approaching this problem.
My work deviated from Robert Penner’s in a number of respects:
- It became clear to me quite early on that I didn’t want to implemented the resolved ease-out and ease-in-out versions of the easing equations for all the different types of curves, so that got me going down the path of creating curve function modifiers, in this case to take an ease-in curve function and spit back out the ease-out and ease-in-out variations.
- While I was at it, I decided, what the hay, let’s make an alternate version of the ease-in-out – I call it the ease-in-the-middle variation, because it swaps the ease-in and ease-out phases around so that the easing is in the middle of the curve. It was cheap, and the ease-in-the-middle curves may be compelling in some use case.
- And then, what the hay, why should you only get quadratic, cubic, quartic, and quintic easing – why not have arbitrary power curves. So I did it! Say hi to easeInPow, easeOutPow, easeInOutPow, and powRightInTheKisser (ok, the last one’s a joke for Family Guy fans – you know who you are).
- It became clear that I didn’t want curve functions to be value interpolators – merely 0-to-1 value remappers. You can do a lot with values in the range of 0 to 1, in terms of using them as blend ratios, or scaling factors. This alleviated the burden from every curve function to have to do the interpolation calculations. More importantly, though, it improves performance when you’re using multiple curve functions together to compose new curve functions (we’ll get to that in a moment), since they aren’t all redundantly re-performing the same interpolation many times over.
- I wanted to be able to use curve functions as units, to be easily recombined to form new curve functions – treating them almost like simple values and involving them in operations with function operator methods. So, I introduced the concept of curve function modifiers. This got my juices flowing, and I was soon conjuring up interesting things you could do when you can operate on curve functions – like mixing two of them together in equal amounts, or bending them horizontally or vertically, or repeating them, or quantizing them, or redrawing them, or multiplying them, or just generally doing unspeakable things to them.
So, back to the Curve Explorer tool. As it turns out, it’s fun to play with curves – especially if you can see them plotted as you tweak parameters, or see how they affect motion with an animation, or what they look like as a color gradient. From the tool you’ll see what I mean as you peruse the list of preset curve expressions that I threw in there. My particular favorites are some of the bounce curves, like “third time’s a charm”, “super bouncy”, “fast thud”, “jumping bean”, and then some of the complex curves that use curve modifiers, like “wobbly easeInOutPow”, “pull and release elastic”, “coin settle effect”, “bounce down the stairs”, and “shutters slamming”. But they’re all fun, really.