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);
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
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
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