彈動(dòng)是動(dòng)畫(huà)編程中最重要和最強(qiáng)大的物理概念之一忌穿。你幾乎可以用彈動(dòng)來(lái)做任何事情连躏，這是一項(xiàng)強(qiáng)大的技術(shù)石景。接下來(lái)讓我們一起來(lái)看看如何實(shí)現(xiàn)彈動(dòng)更舞。
彈動(dòng)原理
在開(kāi)始寫(xiě)代碼之前畦幢，我們先弄明白彈動(dòng)的原理是什么。我們可以模擬一下整個(gè)過(guò)程缆蝉。
假設(shè)小球的起始點(diǎn)位置在x軸的0點(diǎn)宇葱，它的速度vx = 0，目標(biāo)點(diǎn)在x軸的100點(diǎn)上刊头；假設(shè)彈性系數(shù)為0.1黍瞧，用變量spring表示，摩擦系數(shù)為0.95原杂，用變量friction表示印颤。下面是過(guò)程：
- 用距離（target = 100）乘以彈性系數(shù)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。
......
隨著小球一幀一幀的靠近目標(biāo)痛阻，加速度變得越來(lái)越小菌瘪，但速度一直在增加；幾輪過(guò)后阱当，小球越過(guò)了目標(biāo)點(diǎn)俏扩，到達(dá)了x軸上的117點(diǎn)。此時(shí)目標(biāo)點(diǎn)的距離現(xiàn)在是taget = 100 - 117即-17弊添，加速度就是ax = -1.7 录淡，小球開(kāi)始減速。如此往復(fù)油坝，最終到達(dá)目標(biāo)點(diǎn)嫉戚。
但這邊還有一個(gè)問(wèn)題，就是它永遠(yuǎn)不會(huì)停下來(lái)免钻，這是因?yàn)樾∏虻臄[動(dòng)幅度不變彼水，在某個(gè)點(diǎn)的速度不會(huì)減小，因此會(huì)一直彈下去极舔。需要摩擦力讓它停下來(lái)凤覆。我們創(chuàng)建一個(gè)friction變量來(lái)表示摩擦系數(shù)，初始值為0.95拆魏。下面讓我們開(kāi)始實(shí)現(xiàn)代碼盯桦。
完整代碼
<!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, // 彈性系數(shù)
friction = 0.95, // 摩擦系數(shù)
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();
}
好了，我們已經(jīng)簡(jiǎn)單的實(shí)現(xiàn)了一個(gè)完整的彈動(dòng)渤刃，雖然只是在一維坐標(biāo)上拥峦。玩玩看，嘗試改變 spring 和 friction 的值卖子，觀察效果的變化略号。
這里還有個(gè)問(wèn)題，雖然小球看起來(lái)已經(jīng)停下了，但是代碼還在一直運(yùn)行玄柠，浪費(fèi)了系統(tǒng)資源突梦，因?yàn)樾枰覀兗右恍┐a來(lái)判斷是否停止計(jì)算：
if (Math.abs(vx) < 0.001) {
ball.x = targetX;
window.cancelRequestAnimationFrame(animRequest);
}
else{
ball.x += vx;
}
好了。感謝你的閱讀羽利，希望能幫到你宫患。
