javaScript之高级缓动—弹动
2017-12-04 本文已影响0人
做一个胆小鬼
弹动是动画编程中最重要和最强大的物理概念之一。你几乎可以用弹动来做任何事情，这是一项强大的技术。接下来让我们一起来看看如何实现弹动。
弹动原理
在开始写代码之前，我们先弄明白弹动的原理是什么。我们可以模拟一下整个过程。
假设小球的起始点位置在x轴的0点，它的速度vx = 0，目标点在x轴的100点上；假设弹性系数为0.1，用变量spring表示，摩擦系数为0.95，用变量friction表示。下面是过程：
- 用距离（target = 100）乘以弹性系数spring，得到加速度ax = 10，将它加在vx上，速度vx = 10。把vx加在小球的位置上，小球的x = 10。
- 下一轮，距离变成target = 90，ax = 90 * 0.1即ax = 9，加在vx上，vx = 19，小球的x = 29。
- 再下一轮，target = 71，ax = 7.1， vx = 26.1， 小球的x = 55.1。
- 再下一轮，target = 44.9，ax = 4.49， vx = 30.59， 小球的x = 85.69。
......
随着小球一帧一帧的靠近目标，加速度变得越来越小，但速度一直在增加；几轮过后，小球越过了目标点，到达了x轴上的117点。此时目标点的距离现在是taget = 100 - 117即-17，加速度就是ax = -1.7 ，小球开始减速。如此往复，最终到达目标点。
但这边还有一个问题，就是它永远不会停下来，这是因为小球的摆动幅度不变，在某个点的速度不会减小，因此会一直弹下去。需要摩擦力让它停下来。我们创建一个friction变量来表示摩擦系数，初始值为0.95。下面让我们开始实现代码。
完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Easing</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="../js/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>
javascript部分：
// ball.js
function Ball (radius, color) {
color = color || '#ff0000';
this.radius = radius || 40;
this.color = utils.parseColor(color);
this.x = 0;
this.y = 0;
this.rotation = 0;
this.vx = 0;
this.vy = 0;
this.scaleX = 1;
this.scaleY = 1;
this.lineWidth = 1;
}
Ball.prototype.draw = function (context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = this.color;
context.beginPath();
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
}
好了，我们已经简单的实现了一个完整的弹动，虽然只是在一维坐标上。玩玩看，尝试改变 spring 和 friction 的值，观察效果的变化。
这里还有个问题，虽然小球看起来已经停下了，但是代码还在一直运行，浪费了系统资源，因为需要我们加一些代码来判断是否停止计算：
if (Math.abs(vx) < 0.001) {
ball.x = targetX;
window.cancelRequestAnimationFrame(animRequest);
}
else{
ball.x += vx;
}
好了。感谢你的阅读，希望能帮到你。
