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

我们尝试推导下

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

    比如小车的初始速度为 80,加速度为 20,那么 1 秒后的速度为 100

  2. 第二结束的速度是多少呢?

    经过第一秒的加速,第二秒开始时的速度 v0+a,那么它在第二秒结束的速度为

    v = (v0 + a) + a = v0 + 2*a;
    
  3. 第三秒结束后的速度时多少呢?

    经过前两秒的加速,第三秒开始的 v0+a+a,也就是 v0+2*a,那么它在第三秒结束时的速度为

    v = (v0 + 2*a) + a = v0 + 3*a;
    
  4. 那么以此类推,第 t 秒结束时的速度为

    v = ((((v0 + a) + a)+a)+a)...
    

    我们可以看到总共有 t 个 a ,也就是

    v = v0 + a * t
    
  5. 然后我们就可以求出 t 秒内的平均运行速度为

    v' = (v0 + (v0+a*t))/ 2 = v0 + (a*t)/2
    
  6. 那么就可以得到 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.990.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>

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.