background preloader

Easing

Facebook Twitter

Understanding Easing (Explaining Penner’s equations) – JavaScript and ActionScript | upshots. Despite the commonality of the classic easing equations, largely attributed to Penner, there doesn’t seem to be the in-depth examination of “how it works” that a lot of code is subject to nowadays. First, a quick clarification on the most popular easing Classes. The “standard” easing classes (that provide predictable inertia), are Linear, Quad, Cubic, Quart, (Quintic or Strong) There are almost all identical. The only difference between them is the number of times the change is multiplied by itself. If, for example, a particular point in an animation with easeOut should yield a position [1] of say 0.9 (so 90% of the way through the tween), you’d multiple that 0.9 by itself once for every “power” of the ease.

So if the method had a power of 3, it’d be 0.9 * 0.9 * 0.9 = 0.729, instead of 0.9. Those five standard Classes use a power of 1 – 5. And yes, Quintic and Strong are the same. These functions are usually written with 4 arguments [2]: @t is the current time (or position) of the tween. Math - easing functions for bell curves?