弹动是动画编程中最重要和最强大的物理概念之一。你几乎可以用弹动来做任何事情,这是一项强大的技术。接下来让我们一起来看看如何实现弹动。
弹动原理
在开始写代码之前,我们先弄明白弹动的原理是什么。我们可以模拟一下整个过程。
假设小球的起始点位置在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;
}
好了。感谢你的阅读,希望能帮到你。