HTML and CSS Reference
In-Depth Information
var vx = Math.cos(radians) * speed;
var vy = Math.sin(radians) * speed;
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
var p1 = {x:20,y:theCanvas.width-radius};
var ball = {x:p1.x, y:p1.y, velocityx: vx, velocityy:vy, radius:radius,
elasticity: elasticity};
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Easing
Easing
is a technique used in animation to make an object smoothly enter or leave a
location. The idea of easing is that instead of uniformly applying movement to every
frame of animation, you instead increase (
easing in
) or decrease (
easing out
) the number
of pixels you move on each frame. The result is that movement appears to be more
realistic and smooth. There are many different ways to create easing animations. We
will concentrate on two simple examples that will help pave the way for you to further
explore the subject on your own.
Easing Out (Landing the Ship)
The process of easing out refers to easing at the end of an animation: an object moving
from one point to another, starting out fast, and slowing down as it reaches the second
point. To illustrate the concept, we will use the example of a spaceship landing. A
spaceship starts out very fast, applies negative thrust to slow down, and, by the time it
reaches the ground, is moving slowly enough to land without incident. If you've ever
played the video game
Lunar Lander
, you will understand exactly the type of movement
we are trying to accomplish.
