HTML and CSS Reference
In-Depth Information
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
easing = 0.05,
targetX = canvas.width / 2,
targetY = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var vx = (targetX - ball.x) * easing,
vy = (targetY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
ball.draw(context);
}());
};
</script>
</body>
</html>
Play around with the
easing
variable to see how it affects the resulting motion.
The next thing you might want to do is drag the ball around and then have it ease back to its target. This is
similar to the drag-and-drop technique you set up in Chapter 7. Here, you start dragging the ball when it is
pressed with the mouse. The
drawFrame
function checks if the ball is being dragged, and if so, performs
the easing calculations. Here's the document,
02-easing-2.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easing 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
