Math, Physics, and Animation - HTML5 Canvas - page 401

Easing Out (Landing the Ship)
The process of easing out refers to easing at the end of an animation: an object moving from
one point to another, starting out fast, and slowing down as it reaches the second point. To
illustrate the concept, we will use the example of a spaceship landing. A spaceship starts out
very fast, applies negative thrust to slow down, and by the time it reaches the ground, it's
moving slowly enough to land without incident. If you've ever played the video game Lunar
Lander , you will understand exactly the type of movement we are trying to accomplish.
To create this easing-out effect, we need to find two distinct points and then move an object
between them, slowing down the object in linear fashion as it nears the second point. To
achieve this effect, we first calculate the distance between the points. Next, we select a per-
centage value ( easeValue ) that we will use to move the object across that distance on each
frame. As the distance gets shorter, the amount we move gets shorter as well. This gives the
object the appearance of traveling slower and slower as it moves from the starting point to
the ending point, as illustrated in Figure 5-22 . We have drawn the points to show the easing
values as the ship nears the bottom of the screen. Notice that the points get closer and closer
until there is almost no distance between them.