Math, Physics, and Animation - HTML5 Canvas

HTML and CSS Reference

In-Depth Information

var easeValue = .05;

var p1 = {x:240,y:-20};

var p2 = {x:240,y:470};

var ship = {x:p1.x, y:p1.y, endx: p2.x, endy:p2.y, velocityx:0, velocityy:0};

var points = new Array();

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

setInterval(drawScreen, 33);

}

</script>

</head>

<body>

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

We are showing the points in this example but because the background

is black, we load in a white bitmap point image named pointwhite.png

instead of the all-black image, point.png .

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 understand this much better. The thrust builds up as the craft 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 cre-

ating a variable named easeValue :

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. Figure 5-22 shows what this would look like. We have added the points

again to illustrate how the animation speeds up as the ship takes off.

Search WWH ::

Custom Search

Home