HTML and CSS Reference
In-Depth Information
var targetX = canvas.width / 2,
targetY = canvas.height / 2;
Then calculate the distance to the target. Assuming you have an object named
ball
, you just subtract the
ball's x and y from the target x and y:
var dx = targetX - ball.x,
dy = targetY - ball.y;
Your velocity is then the distance times the fraction:
var vx = dx * easing,
vy = dy * easing;
ball.x += vx;
ball.y += vy;
These last few steps need to be repeated, so those will go in your
drawFrame
function. Let's take a closer
look at those steps, as they can be largely simplified:
var dx = targetX - ball.x,
dy = targetY - ball.y,
vx = dx * easing,
vy = dy * easing;
ball.x += vx;
ball.y += vy;
You can condense the first two lines into the second two pretty easily:
var vx = (targetX - ball.x) * easing,
vy = (targetY - ball.y) * easing;
ball.x += vx;
ball.y += vy;
Or, you can consolidate it even further:
ball.x += (targetX - ball.x) * easing;
ball.y += (targetY - ball.y) * easing;
As you explore easing, you might want to use the more verbose descriptions to make it clearer. But once
you understand how it works, the third version communicates perfectly. We'll stick with the second version
here, just to reinforce the idea that you're dealing with velocity.
Now, let's see it in action. You'll need the
Ball
class you've been using all along, and here's the example,
01-easing-1.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easing 1</title>
<link rel="stylesheet" href="style.css">
