← Canvas 匀速运动 Canvas 动画 - 长尾阴影效果 →

Canvas 加速运动

上一章节我们学习了匀速运动，它以恒定的时间运动，一般高速进入航行阶段就是匀速运动

当然了，汽车启动的时候和刹车的时候，一般就不是匀速运动，因为我们能很明显的感觉到速度越来越快或者越来越慢

这种感觉，就是加速运动(减速运动)

注意

求运动距离的唯一公式就是平均速度( v ) 乘以运行时间 ( t )
其它公式都是在这个公式上推导出来的

加速运动运动

加速运动 就是物体在单位时间内 ( △t ) 速度会不断增加，由 v1 增加到 v2

我们称这个增加的速度为加速度 a ，所以加速度 a = (v2-v1)/△t

匀加速直线运动

最简单的加速运动就是 匀加速直线运动 ，匀加速直线运动就是始终往一个方向运行，而且加速度是一个恒定的值

我们假设物体加速之前的初始速度为 (v0)，那么物体在某个时间点的速度( v ) 为

v = v0 + a * t;

这个公式很好推导，把 v 改成 v2，把 v0 改成 v1 就是

v2 = v1 + a * t;

然后两边都减去 v1 得到 v2-v1 = a*t ，最后两边除以 t 得到

(v2-v1)/t = a

是不是就是加速度公式

匀加速直线运动的距离

某个物体以初始速度(v0)，匀加速度 a，运动一段时间 t 后的距离 ( S ) 是多少呢？

S + v0 * t + (a * t * t) / 2

我们尝试推导下

先看看运动 1s 后的速度，为 v = v0 + a ,应该能理解吧

比如小车的初始速度为 80，加速度为 20，那么 1 秒后的速度为 100
第二结束的速度是多少呢？

经过第一秒的加速，第二秒开始时的速度 v0+a，那么它在第二秒结束的速度为
```
v = (v0 + a) + a = v0 + 2*a;
```
第三秒结束后的速度时多少呢？

经过前两秒的加速，第三秒开始的 v0+a+a，也就是 v0+2*a，那么它在第三秒结束时的速度为
```
v = (v0 + 2*a) + a = v0 + 3*a;
```
那么以此类推，第 t 秒结束时的速度为
```
v = ((((v0 + a) + a)+a)+a)...
```
我们可以看到总共有 t 个 a ，也就是
```
v = v0 + a * t
```
然后我们就可以求出 t 秒内的平均运行速度为
```
v' = (v0 + (v0+a*t))/ 2 = v0 + (a*t)/2
```

那么就可以得到 t 秒内运行的距离为

S = v' * t = (v0 + (a*t)/2) * t

  = v0 * t + a*t*t/2

例如上图小球在单位时间内 1s 移动的距离都是 25，所以速率 v = 25/1=25

那么物体在某个时间移动的总距离就是

S = v * t

例如小球运动了 3s 有后距离原点 (0) 的距离为 25*3 = 75

匀加速(减速)直线运动动画

球还是那个球，我们看看如何模拟落地回弹效果

我们设置小球 X 轴和 Y 轴方向的加速度分别为 0.99 和 0.25 也就是匀减速运动了

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-1" width="400" height="200">
</canvas>
<script>
var c = document.getElementById('canvas-1');
var ctx = c.getContext('2d');
var rq = null;

var ball = {
  x: 10,
  y: 10,
  vx: 5,
  vy: 2,
  radius: 10,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.clearRect(0,0, c.width, c.height);
  ctx.strokeRect(0,0,c.width, c.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vy *= .99;
  ball.vy += .25;

  if (ball.y + ball.vy > c.height ||
      ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > c.width ||
      ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  rq = window.requestAnimationFrame(draw);
}

var rq = window.requestAnimationFrame(draw);
ball.draw();
</script>