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

Figure 5-22. Spaceship landing (easing out)

Figure 5-22 displaystheresultsof CH5EX18.html .Now,let'slookathowthisexample works
in detail. First, we will load in the ship.png image the same way we have loaded images pre-
viously in this chapter:

var var shipImage ;

function function eventWindowLoaded () {

shipImage = new new Image ();

shipImage . src = "ship.png"
shipImage . onload = eventAssetsLoaded ;

}

function function eventAssetsLoaded () {

canvasApp ();

}

Then, in canvasApp() , we create a variable named easeValue , which represents the percent-
age to move the ship across the remaining distance between the two points. In our example, it
is 5% ( .05 ):

var var easeValue = . 05 ;