I think it’s fair to say that most people apply easing functions as arguments to a method in a tweening library instead of direct application. So, how does one directly apply Penner-style easing functions to path animation along a parametric curve?
The previous post in this series illustrated the importance of arc-length parameterization in proper application of easing. Otherwise, velocity along the curve is a function of control-point placement and any application of easing produces incorrect motion.
The starting value of the curve’s parameter is zero, so a straightforward easing application uses b = 0 and c = 1. The easing fuction returns a factor in [0,1] that is normally used to map a tweenable parameter such as x, y, or alpha along its range. In path animation, this factor plays the role of the curve’s parameter.
Suppose the total duration of the animation is stored in the variable duration and the current elapsed time in the variable elapsed. The following code segment applies to easing-out,
var factor:Number = factory.easeOut(elapsed, 0, 1, duration);
arcLengthMarker.x = arcLength.getX(factor);
arcLengthMarker.y = arcLength.getY(factor);
where arcLength is the arc-length parameterized cubic Bezier curve and arcLengthMarker is the sprite animated along that curve. The factory variable is a reference to the Singularity easing factory. This allows the user to set the easing type by symbolic name and either return a reference to a class that implements the easing or the specific easing factor. References to specific easing classes are created just-in-time.
The online demo should be up tomorrow.
The Algorithmist 