It is probably safe to say that the majority of people using the Penner easing functions pass them as an argument to a method in a tweening library. In terms of direct application, how does one apply easing along a parametric curve? As illustrated in this blog post, arc-length parameterization is very important as proper easing requires velocity control along the curve.

Think of the curve as being stretched out into a straight line. One would expect a parameter value of 0.5 to be halfway along the line. If it is not, then any adjustment to a sprite's motion based on easing will be incorrect. That's exactly what happens with the natural parameterization of Bezier curves. The distribution of sprites along the curve will generally not be uinformly spaced according to distance along the curve.

This topic has been discussed in this online demo. The Penner easing functions have been added to Singularity and implemented as a simple easing factory. An easing method is selected by symbolic name. The factory returns either a reference to a class that implements the specified easing or the easing factor. Class references are created just-in-time. The factory allows easy switching back and forth between a variety of easing functions.

This demo shows two cubic Bezier curves with the same geometric constraints (although offset vertically for demonstration purposes). The topmost curve is naturally parameterized. The bottom curve is arc-length parameterized. A red marker is animated along the upper curve and a green marker along the bottom curve. The animation duration is two seconds.

This example requires the Flash™ 9 player.

Select different easing functions (all animation is ease-out) and try the animation again. The difference in motion between the rad and green markers illustrates how much the natural parameterization is 'off' in its representation of the eased motion. Green marker illustrates proper easing.

As an exercise, modify the demo to support more easing methods and ease-in as well as ease-out.

For further reading,

:: Arc-Length Parameterization - Introduction to curve parameterization and how to reparameterize a curve on arc length. Techniques applied to a Catmull-Rom spline. Examples include how to distribute sprites evenly along a curve and path animation (including path following and orientation).

Source Code. Download the Singularity package (this example is in Singularity/demos/BezierEasing.mxml).