HTML and CSS Reference
In-Depth Information
Figure 5-22. Ship taking off (easing in)
First, we set the beginning position of the
ship
(
p1
) to the bottom center of the canvas.
Then, we set the beginning
speed
of the ship very low (
.5
pixels per frame), and set the
angle
to
270
(straight up the canvas). We then calculate the
x
and
y
velocity values for
the
ship
:
var p1 = {x:240,y:470};
var tempSpeed = .5;
var tempAngle = 270 ;
var tempRadians = tempAngle * Math.PI/ 180;
var tempvelocityx = Math.cos(tempRadians) * tempSpeed;
var tempvelocityy = Math.sin(tempRadians) * tempSpeed;
var ship = {x:p1.x, y:p1.y, velocityx:tempvelocityx, velocityy:tempvelocityy};
In
drawScreen()
, instead of finding the distance between two points, we add the
ease
Value
to the
x
and
y
velocities on each frame, and then apply it to the
ship x
and
y
values
before drawing it to the canvas. This creates a linear increase in speed, resulting in the
easing-in effect we want to see:
