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

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 percentage 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-21 . 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.
Figure 5-21. Spaceship landing (easing out)
Figure 5-21 displays the results of CH5EX18.html . Now, let's look at how this example
works in detail. First, we will load in the ship.png image the same way we have loaded
images previously in this chapter:
var shipImage;
function eventWindowLoaded() {
shipImage = new Image();
shipImage.src = "ship.png"
shipImage.onload = eventAssetsLoaded;