HTML and CSS Reference
In-Depth Information
<script src="ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball = new Ball(),
easing = 0.05;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var vx = (mouse.x - ball.x) * easing,
vy = (mouse.y - ball.y) * easing;
ball.x += vx;
ball.y += vy;
ball.draw(context);
}());
};
</script>
</body>
</html>
Move the mouse around and see how the ball follows, and how it goes faster when you get further away.
Think of what other moving targets you could have. Maybe an object could ease to another object—you
can set up some very complex looking effects by chaining together this simple technique.
Easing isn't just for motion
It's important to understand, that the examples in this topic are just that: examples. In each one, we're
manipulating numbers that are used for various properties of an object. For the most part, we're using the
x
and
y
properties to control positions of objects, but they can have many other properties that you can
manipulate because most of them are represented by numbers. When you read a particular example, try it
out, but don't leave it at that. Try the example, and manipulate other properties as well. Here's a few ideas
to get you started.
Rotation
Set a current and target rotation. Of course, you need something that can be visibly rotated and drawn to
the canvas, like the
Arrow
class from earlier chapters:
var rotation = 90,
targetRotation = 270;
Then ease it:
rotation += (targetRotation - rotation) * easing;
arrow.rotation = rotation * Math.PI / 180; //degrees to radians
