← Canvas requestAnimationFrame() Canvas 加速运动 →

Canvas 匀速运动

好了，数学烧脑问题先放一边，我们接下来开始物理烧脑问题

物理烧脑问题有哪些呢？

恒速运动，加速运动，摩擦力，空气阻力，水浮力/水压力，磁场，电场... 不敢多说了，我怕被打

我们从最简单的开始，最简单的是啥？ 恒速运动 呗

恒速运动

想必大家对 恒速运动 不陌生，会开车的都知道，比如高速公路保持 120km/h 的速度行驶

不会开车也没关系，看看你手机上的时间，如果不出意外，秒针每隔 1 秒增加 1

所以，恒速运动 就是物体在单位时间内 ( △t ) 运动的距离是一个恒定的值 ( △S )，我们称这个速度为速率 v

也就是 v = △S

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

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

S = v * t

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

匀速动画

知道了匀速运动的原理就好办了，我们就可以做匀速动画了

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

// 小球
var ball = {
  x: 10,
  y: 50,
  direction:1,
  radius: 10,
  color: 'black',
  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 animate_it (){
    ctx.clearRect(0,0,c.width,c.height);
    ball.draw();

    if ( ball.direction == 1 )
    {
        ball.x += 100/60;
    }else {
        ball.x -= 200/60;
    }


    if (ball.x <= 0 ){
        ball.x = 0;
        ball.direction = 1;
    }

    if ( ball.x > 400 ){
        ball.x = 400;
        ball.direction = 0;
    }

    window.requestAnimationFrame(animate_it);
}

window.requestAnimationFrame(animate_it);

</script>

代码很简短

if (ball.x <= 0 ){
    ball.x = 0;
    ball.direction = 1;
}

if ( ball.x > 400 ){
    ball.x = 400;
    ball.direction = 0;
}

上面这段代码用于边界检测

if ( ball.direction == 1 )
{
    ball.x += 100/60;
}else {
    ball.x -= 200/60;
}

如果从左往右跑，匀速速率为 100/60 ，如果从右往左跑，速率变成 200/60

为什么我们不直接计算值呢？因为 60 是 requestAnimationFrame() 回调时间
我们这样赋值就可以很明显的知道，每秒运动了多少

范例 2

我们让小球随意四处运动，碰到了墙壁(边界)就自动回弹吧)

<!DOCTYPE html>
<meta charset="utf-8">
<canvas id="canvas-2" width="400" height="100">
</canvas>
<script>
var c2 = document.getElementById('canvas-2');
var ctx2 = c2.getContext('2d');

// 小球
var ball2 = {
  x: 10,
  y: 10,
  vx: -100/60,
  vy: -100/30,
  direction:1,
  radius: 10,
  color: 'black',
  draw: function() {
    ctx2.beginPath();
    ctx2.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx2.closePath();
    ctx2.fillStyle = this.color;
    ctx2.fill();
  }
};

function animate_it2 (){
    ctx2.clearRect(0,0,c2.width,c2.height);
    ctx2.strokeRect(0,0,c2.width,c2.height);
    ball2.draw();

    ball2.x += ball2.vx;
    ball2.y += ball2.vy;


    if (ball2.x <= 0 ){
        ball2.x = 0;
        ball2.vx = - ball2.vx;
    }

    if ( ball2.y <= 0 ) {
        ball2.y = 0;
        ball2.vy =  - ball2.vy;
    }

    if ( ball2.x > c2.width  ){
        ball2.x = c2.width;
        ball2.vx = -ball2.vx;
    }

    if ( ball2.y > c2.height ){
        ball2.y = c2.height;
        ball2.vy = - ball2.vy;
    }

    window.requestAnimationFrame(animate_it2);
}

window.requestAnimationFrame(animate_it2);

</script>

← Canvas requestAnimationFrame() Canvas 加速运动 →

简单教程

Canvas 匀速运动

恒速运动

匀速动画

范例 2

Canvas 基础教程