HTML and CSS Reference
In-Depth Information
ball = new Ball(),
easing = 0.05,
targetX = canvas.width / 2,
targetY = canvas.height / 2,
isMouseDown = false;
canvas.addEventListener('mousedown', function () {
if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
isMouseDown = true;
canvas.addEventListener('mouseup', onMouseUp, false);
canvas.addEventListener('mousemove', onMouseMove, false);
}
}, false);
function onMouseUp () {
isMouseDown = false;
canvas.removeEventListener('mouseup', onMouseUp, false);
canvas.removeEventListener('mousemove', onMouseMove, false);
}
function onMouseMove () {
ball.x = mouse.x;
ball.y = mouse.y;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!isMouseDown) {
var vx = (targetX - ball.x) * easing,
vy = (targetY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
}
ball.draw(context);
}());
};
</script>
</body>
</html>
When to stop easing
If you are calculating simple easing to a single target, eventually you'll get to the point where the object is
at the target and the purpose of the easing has been achieved. But, in the examples so far, the
easing code continues to execute, even though the object isn't visibly moving anymore. If you are
just easing to that point and leaving the object there, continuing to run the easing code is a waste
of system resources. If you've reached your goal, you might as well stop trying. At first glance, this
would be as simple as checking whether the object is at its target and turning off the animation
loop, like so:
