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

Easing In (Taking Off)

Easing in is the opposite of easing out. When an animation eases in , it starts slowly and then
gets faster and faster. If you have ever seen a video of a space shuttle taking off, you will un-
derstand this much better. The thrust builds up as the craft at first moves slowly and then gets
faster and faster as it moves through the sky. We are going to use this “taking off” example as
a way to develop code for an easing-in animation on HTML5 Canvas.

In canvasApp() , we start our code much the same way as in the last example—by creating a
variable named easeValue :

var var easeValue = . 05 ;

However, for easing in, instead of this being a percentage of the remaining distance between
two points, it is simply a constant value added to the velocity of the ship on each frame. Fig-
ure 5-23 shows what this would look like. We have added the points again to illustrate how
the animation speeds up as the ship takes off.