书籍名称：HTML5-Animation-with-JavaScript
书籍源码：https://github.com/lamberta/html5-animation1
1.释放
现在假设我们写一个动画，将它运动到指定的地方，先设置一个速度，运用三角函数，我们计算x的速度，计算y的速度，判断距离。到达终点时停止。
这种方法在有些情况适用，但某些情况下，我们想让物体运动的自然一些。
在一些运动，我们知道目标，且一开始速度很快，后面逐渐变慢。也就是说，它的速度和距离是成正比的。看下图。
01-easing-1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easing 1</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="../include/utils.js"></script>
<script src="./classes/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>
增加拖拽
02-easing-2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easing 2</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Press and drag circle with mouse.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/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,
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>
按之前的想法速度是接近0的但不会为了，我们要加一个停止条件
03-easing-off.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easing Off</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<textarea id="log"></textarea>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
log = document.getElementById('log'),
ball = new Ball(),
easing = 0.05,
targetX = canvas.width / 2,
animRequest;
ball.y = canvas.height / 2;
(function drawFrame () {
animRequest = window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = targetX - ball.x;
if (Math.abs(dx) < 1) {
ball.x = targetX;
/* ERRATA: 'cancelRequestAnimationFrame' renamed to 'cancelAnimationFrame' to reflect an update to the W3C Animation-Timing Spec.
* See utils.js for the update to check for cross-browser compatibility.
*/
window.cancelAnimationFrame(animRequest);
log.value = "Animation done!";
} else {
var vx = dx * easing;
ball.x += vx;
}
ball.draw(context);
}());
};
</script>
</body>
</html>
移动到鼠标，是先获取鼠标的位置，并作为运动的目标点。
04-ease-to-mouse.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ease to Mouse</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Move mouse on canvas element.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/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>
补充一下，释放（easing）不只是使用与运动，它是一种由快变慢的效果，还适用于旋转（如大转盘），颜色等。
2.弹性
一维弹簧效果
弹簧效果离中心点的距离和加速度成正比。实际的加速度应该是距离*系数。
05-spring-1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spring 1</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
spring = 0.03,
targetX = canvas.width / 2,
vx = 0;
ball.y = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = targetX - ball.x,
ax = dx * spring;
vx += ax;
ball.x += vx;
ball.draw(context);
}());
};
</script>
</body>
</html>
比较真实的弹簧效果
在实际生活有摩擦力或是阻力，物体不会无休止的运动，下面将阻力的考虑在内。
06-spring-2.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spring 2</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
spring = 0.03,
friction = 0.95,
targetX = canvas.width / 2,
vx = 0;
ball.y = canvas.height / 2;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = targetX - ball.x,
ax = dx * spring;
vx += ax;
vx *= friction;
ball.x += vx;
ball.draw(context);
}());
};
</script>
</body>
</html>
这里只是简单的用阻力来控制速度无限接近0，需要补充一个到目标停止计算的条件类似如下
if (Math.abs(vx) > 0.001) {
vx += ax;
vx *= friction;
ball.x += vx;
}
二维考虑y方向
07-spring-3.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spring 3</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
spring = 0.03,
friction = 0.95,
targetX = canvas.width / 2,
targetY = canvas.height / 2,
vx = 0,
vy = 0;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = targetX - ball.x,
dy = targetY - ball.y,
ax = dx * spring,
ay = dy * spring;
vx += ax;
vy += ay;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
ball.draw(context);
}());
};
</script>
</body>
</html>
在目标移动的情况
考虑移动到鼠标位置的弹簧效果，将目标设置为鼠标位置即可。
08-spring-4.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spring 4</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Move mouse on canvas element.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball = new Ball(),
spring = 0.03,
friction = 0.95,
vx = 0,
vy = 0;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = mouse.x - ball.x,
dy = mouse.y - ball.y,
ax = dx * spring,
ay = dy * spring;
vx += ax;
vy += ay;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
ball.draw(context);
}());
};
</script>
</body>
</html>
考虑弹簧线
给弹簧效果加条弹簧线，让其更真实一点。
用api画一条圆心到鼠标位置的线就可以了。
考虑重力时，只需再加上重力加速度。
09-spring-5.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Spring 5</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Move mouse on canvas element.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball = new Ball(),
spring = 0.03,
friction = 0.9,
gravity = 2,
vx = 0,
vy = 0;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = mouse.x - ball.x,
dy = mouse.y - ball.y,
ax = dx * spring,
ay = dy * spring;
vx += ax;
vy += ay;
vy += gravity;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
context.beginPath();
context.moveTo(ball.x, ball.y);
context.lineTo(mouse.x, mouse.y);
context.stroke();
ball.draw(context);
}());
};
</script>
</body>
</html>
链式效果
链式效果的是对单个效果的发散，第一个球的目标为鼠标，第二个球的目标为第一个球的中心，依次类推。
10-chain.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Chain</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Move mouse on canvas element.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball0 = new Ball(),
ball1 = new Ball(),
ball2 = new Ball(),
spring = 0.03,
friction = 0.9,
gravity = 2;
function move (ball, targetX, targetY) {
ball.vx += (targetX - ball.x) * spring;
ball.vy += (targetY - ball.y) * spring;
ball.vy += gravity;
ball.vx *= friction;
ball.vy *= friction;
ball.x += ball.vx;
ball.y += ball.vy;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
move(ball0, mouse.x, mouse.y);
move(ball1, ball0.x, ball0.y);
move(ball2, ball1.x, ball1.y);
//draw spring
context.beginPath();
context.moveTo(mouse.x, mouse.y);
context.lineTo(ball0.x, ball0.y);
context.lineTo(ball1.x, ball1.y);
context.lineTo(ball2.x, ball2.y);
context.stroke();
//draw balls
ball0.draw(context);
ball1.draw(context);
ball2.draw(context);
}());
};
</script>
</body>
</html>
用数组管理
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Chain Array</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Move mouse on canvas element.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
balls = [],
numBalls = 10,
spring = 0.03,
friction = 0.9,
gravity = 2;
while (numBalls--) {
balls.push(new Ball(20));
}
function move (ball, targetX, targetY) {
ball.vx += (targetX - ball.x) * spring;
ball.vy += (targetY - ball.y) * spring;
ball.vy += gravity;
ball.vx *= friction;
ball.vy *= friction;
ball.x += ball.vx;
ball.y += ball.vy;
}
function draw (ballB, i) {
//if first ball, move to mouse
if (i === 0) {
move(ballB, mouse.x, mouse.y);
context.moveTo(mouse.x, mouse.y);
} else {
var ballA = balls[i-1];
move(ballB, ballA.x, ballA.y);
context.moveTo(ballA.x, ballA.y);
}
context.lineTo(ballB.x, ballB.y);
context.stroke();
ballB.draw(context);
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
balls.forEach(draw);
}());
};
</script>
</body>
</html>
多个弹簧
12-multi-spring.html
12-multi-spring.html
与目标保持一定距离
利用三角函数，根据鼠标位置计算出将要运动到的目标。之后同上。
13-offset-spring.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Offset Spring</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Move mouse on canvas element.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball = new Ball(),
spring = 0.03,
friction = 0.9,
springLength = 100,
vx = 0,
vy = 0;
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
var dx = ball.x - mouse.x,
dy = ball.y - mouse.y,
angle = Math.atan2(dy, dx),
targetX = mouse.x + Math.cos(angle) * springLength,
targetY = mouse.y + Math.sin(angle) * springLength;
vx += (targetX - ball.x) * spring;
vy += (targetY - ball.y) * spring;
vx *= friction;
vy *= friction;
ball.x += vx;
ball.y += vy;
context.beginPath();
context.moveTo(ball.x, ball.y);
context.lineTo(mouse.x, mouse.y);
context.stroke();
ball.draw(context);
}());
};
</script>
</body>
</html>
双重弹簧
综合运用：用到保持距离，一般弹簧效果，移动目标等
14-double-spring.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Double Spring</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Press and drag circles with mouse.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball0 = new Ball(20),
ball1 = new Ball(20),
ball0_dragging = false,
ball1_dragging = false,
spring = 0.03,
friction = 0.9,
springLength = 100,
vx = 0,
vy = 0;
ball0.x = Math.random() * canvas.width;
ball0.y = Math.random() * canvas.height;
ball1.x = Math.random() * canvas.width;
ball1.y = Math.random() * canvas.height;
canvas.addEventListener('mousedown', function () {
if (utils.containsPoint(ball0.getBounds(), mouse.x, mouse.y)) {
ball0_dragging = true;
}
if (utils.containsPoint(ball1.getBounds(), mouse.x, mouse.y)) {
ball1_dragging = true;
}
}, false);
canvas.addEventListener('mouseup', function () {
if (ball0_dragging || ball1_dragging) {
ball0_dragging = false;
ball1_dragging = false;
}
}, false);
canvas.addEventListener('mousemove', function () {
if (ball0_dragging) {
ball0.x = mouse.x;
ball0.y = mouse.y;
}
if (ball1_dragging) {
ball1.x = mouse.x;
ball1.y = mouse.y;
}
}, false);
function springTo (ballA, ballB) {
var dx = ballB.x - ballA.x,
dy = ballB.y - ballA.y,
angle = Math.atan2(dy, dx),
targetX = ballB.x - Math.cos(angle) * springLength,
targetY = ballB.y - Math.sin(angle) * springLength;
ballA.vx += (targetX - ballA.x) * spring;
ballA.vy += (targetY - ballA.y) * spring;
ballA.vx *= friction;
ballA.vy *= friction;
ballA.x += ballA.vx;
ballA.y += ballA.vy;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!ball0_dragging) {
springTo(ball0, ball1);
}
if (!ball1_dragging) {
springTo(ball1, ball0);
}
context.beginPath();
context.moveTo(ball0.x, ball0.y);
context.lineTo(ball1.x, ball1.y);
context.stroke();
ball0.draw(context);
ball1.draw(context);
}());
};
</script>
</body>
</html>
三重
好复杂……
15-triple-spring.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Triple Spring</title>
<link rel="stylesheet" href="../include/style.css">
</head>
<body>
<header>
Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
</header>
<canvas id="canvas" width="400" height="400"></canvas>
<aside>Press and drag circles with mouse.</aside>
<script src="../include/utils.js"></script>
<script src="./classes/ball.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ball0 = new Ball(20),
ball1 = new Ball(20),
ball2 = new Ball(20),
ball0_dragging = false,
ball1_dragging = false,
ball2_dragging = false,
spring = 0.03,
friction = 0.9,
springLength = 100,
vx = 0,
vy = 0;
ball0.x = Math.random() * canvas.width;
ball0.y = Math.random() * canvas.height;
ball1.x = Math.random() * canvas.width;
ball1.y = Math.random() * canvas.height;
ball2.x = Math.random() * canvas.width;
ball2.y = Math.random() * canvas.height;
canvas.addEventListener('mousedown', function () {
if (utils.containsPoint(ball0.getBounds(), mouse.x, mouse.y)) {
ball0_dragging = true;
}
if (utils.containsPoint(ball1.getBounds(), mouse.x, mouse.y)) {
ball1_dragging = true;
}
if (utils.containsPoint(ball2.getBounds(), mouse.x, mouse.y)) {
ball2_dragging = true;
}
}, false);
canvas.addEventListener('mouseup', function () {
if (ball0_dragging || ball1_dragging || ball2_dragging) {
ball0_dragging = false;
ball1_dragging = false;
ball2_dragging = false;
}
}, false);
canvas.addEventListener('mousemove', function () {
if (ball0_dragging) {
ball0.x = mouse.x;
ball0.y = mouse.y;
}
if (ball1_dragging) {
ball1.x = mouse.x;
ball1.y = mouse.y;
}
if (ball2_dragging) {
ball2.x = mouse.x;
ball2.y = mouse.y;
}
}, false);
function springTo (ballA, ballB) {
var dx = ballB.x - ballA.x,
dy = ballB.y - ballA.y,
angle = Math.atan2(dy, dx),
targetX = ballB.x - Math.cos(angle) * springLength,
targetY = ballB.y - Math.sin(angle) * springLength;
ballA.vx += (targetX - ballA.x) * spring;
ballA.vy += (targetY - ballA.y) * spring;
ballA.vx *= friction;
ballA.vy *= friction;
ballA.x += ballA.vx;
ballA.y += ballA.vy;
}
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!ball0_dragging) {
springTo(ball0, ball1);
springTo(ball0, ball2);
}
if (!ball1_dragging) {
springTo(ball1, ball0);
springTo(ball1, ball2);
}
if (!ball2_dragging) {
springTo(ball2, ball0);
springTo(ball2, ball1);
}
context.beginPath();
context.moveTo(ball0.x, ball0.y);
context.lineTo(ball1.x, ball1.y);
context.lineTo(ball2.x, ball2.y);
context.lineTo(ball0.x, ball0.y);
context.stroke();
ball0.draw(context);
ball1.draw(context);
ball2.draw(context);
}());
};
</script>
</body>
</html>
来源：https://www.cnblogs.com/winderby/p/4260319.html