Understanding the Ease In/Ease Out Graph

The Ease In/Ease Out graph is easy to use. The horizontal axis represents the frames of the movie and the vertical axis represents the percentage of change in animation (tweening). You control the animation using the control points on the velocity curve. You can add points by clicking on the curve or delete points by selecting the point and pressing the Delete key.

Each control point has two handles, called tangent points. By moving these tangent points, you can control the manner of the velocity curve (see Figure 1). This affects the smoothness of the resulting tweening animation.

Figure 1. Custom Ease In/Ease Out graph

Let’s break down the different parts of the graph to see better how it works. The speed of the tweening is affected by the slope of the velocity curve. The vertical parts of the curve with a large slope represent a fast animation, while the horizontal parts with a small slope represent a slow animation. In Figure 2 the velocity curve starts with a large slope value, moves horizontally, and ends with a large slope again in the end of the animation.

Figure 2. Effect of the velocity curve slope on the animation

Play the following demo to see the effect of the velocity curve slope in Figure 2 on the animation:

As I mentioned, the tangent points affect the slopes in the velocity curve. Steep curves produce a sharp, fast animation that is suitable for mimicking a collision, such as metal balls hitting each other. I will get to this example later.

Wide curves produce a smooth animation that is suitable for creating slow movements. In Figure 3, the first collision with the opposite border is a sharp animation point, which indicates a fast trajectory of the animated star, while the wide part of the velocity curve produces a slow return of the star to the middle of the Stage.

Figure 3. Tangent points in the velocity graph

Play the following demo to see the effect of the tangent points shown in Figure 3 on the animation:

In this example, the points location on the graph indicates the tweening percentage. When putting a low value point after a high value one, this means that the tweening will retreat back to a lower percentage. In Figure 3, the lower point indicates that the motion tweening will retreat to 30% of the tweening after reaching its final effect (100% percent).