首页 专题 H5案例 前端导航 UI框架

canvas动画包教不包会:速度与加速度

阅读 1400 评论 0
在上两章中,我们介绍了数学中三角函数的概念和使用,在这一章中,我们将介绍物理知识:速度向量与加速度。

真是坑爹!学完数学又要学习物理,真的是回到了初中......,不过你放心,这里介绍的都不是深奥的物理知识。

这一章的内容包括:
  1. 速度向量
  2. 加速度
  3. 附录:重要公式

1、速度向量
速度向量和速度并不等同,后者仅仅是前者的一部分,前者还包括了一个重要因素:方向,因此,速度向量也可以说是某个方向上的速度。

方向在动画中是极其重要的,就比如说,你做一个赛车游戏,要是连方向都搞不清楚,那岂不是常常发生连环车祸。

我们可以将速度向量分为两种:单轴上的速度向量和双轴上的速度向量

1.1 单轴上的速度向量
单轴上的速度向量也就是把速度向量只放到X轴(水平运动)或Y轴(垂直运动)上。

如上图所示,单轴上的速度向量可以有四个方向:

var vx = 1;  //定义x轴速度

var vy = 1;  //定义y轴速度

沿x轴正方向:ball.x += vx;

沿x轴反方向:ball.x -= vx;

沿y轴正方向:ball.y += vy;

沿y轴反方向:ball.y -= vy;

接下来我们模拟四个方向的运动(点击增加球按钮,随机生成四个方向运动圆球,在碰到边界时,会将速度 v 变为速度的负值 -v ,让其反方向运动):

关键代码:

ball.x += ball.speed.x;

// 或   

ball.y += ball.speed.y;

这段代码就是让圆球沿着x轴或y轴运动。
边界检测(下一章会讲到)和反方向运动:

if(ball.x >= (canvas.width-ball.radius*2) || ball.x <= 0){   

  ball.speed.x = -ball.speed.x;   

};


注意:canvas上的Y坐标轴的方向是和普通坐标轴的方向相反,如不清楚,可到三角函数那一章看坐标图,这里就不贴出了。

1.2 双轴上的速度向量
我们也可以将双轴上的速度向量看做是任意方向上运动。

下面做一个实例,就好像发射炮弹一样:

重要代码:

ball.x += 5;   

ball.y += 4;

x轴的速度定为5,y轴的速度定为4。

当然,像上面这样直接在x方向和y方向上增加速度的情况比较少见,更多时候,我们都是知道物体在某个方向上以一定速度运动,这时,我们就需要求x方向和y方向上的速度了,怎么求呢?

接下来就要用到之前介绍的三角函数了。

举个例子:一个物体以每帧1像素的速度向45°(θ = 45°,v = 1)的方向移动

就像上图一样,我们可以将速度v分解成vx和vy,这恰好就是x方向和y方向。我们已经知道一个角θ=45°,还有一条斜边v = 1,那利用Math.cos与Math.sin函数就可以很简单的求到vx和vy了。

vx = Math.cos(45 * Math.PI / 180) *1;

vy = Math.sin(45 * Math.PI / 180)*1;

获得了vx和vy,我们就可以像单轴上的速度一样分别给x方向和y方向添加速度了。

注意:一个物体隐含了许多可供调整的属性,并不仅仅局限于速度,还有旋转速度、颜色深浅等等,要想让物体做更多的动画效果,就必须学会将速度变化的原理应用到其他属性上,俗称举一反三。

2、加速度
加速度也是向量,包括了方向,一般用a来表示加速度。

讲到加速度,在生活中最明显的就是汽车启动了,当你启动汽车,踩下油门,汽车的速度就会增加,从0开始,过一两秒后,速度将提升到每小时5~6公里,随后又变成10公里每小时等。

从计算的角度来看,加速度就是增加到速度向量上的数值。

加速度也可分为:单轴加速度和双轴加速度

2.1 单轴加速度
单轴加速度和单轴上的速度向量类似,也是只沿着x轴或y轴运动,同样有四个方向。

看例子(你可以按键盘左键和右键看看):

当你按左键时,你会发现速度越来越慢,多度减速时甚至反方向运动了,当你按右键时,速度回越来越快,最后飞出了canvas。

ball.speed.x += ax;   

ball.x += ball.speed.x;


function keyLeft(){   

  ax += (-0.01);   

};   

function keyRight(){   

  ax += 0.02;   

};

window.tool.captureKeyDown({"37":keyLeft,"39":keyRight});  // 这事件在用户交互一章中已封装的


2.2 双轴加速度
双轴加速度和双轴上的速度是同一个道理,通过加速度分解,你可以得到x轴上的加速度和y轴上的加速度,这里就不出例子了,你可以试着改变上面的例子,给物体加入一个任何角度的加速度。


2.3 重力加速度(g)

我想大家对重力加速度并不陌生,这是我们在生活中感觉最明显,比如你往上跳一跳,随后便会自然落下,这就是给你添加了一个重力加速度。


重力加速度简单来说就是y轴上的一个加速度,在计算加速度时,我们只需将重力加速度g添加到每一帧的vy(y轴上的加速度和)属性上就可以了。


我们来模拟一下重力加速度(点击按钮):

原理:小球从空中自由降落至地面,然后弹起,循环往复,直到它最终速度为零停留在地面。



代码解析:

var g = 0.3;   //重力加速度

var bounce = -0.7;  //反弹系数

//边界检测

if(ball.y >= (canvas.height - ball.radius * 2)) {   

  ball.y = canvas.height - ball.radius * 2;   

  ball.speed.y *= bounce;  //反复相乘,最后趋近于0   

};   

ball.speed.y += g;   

ball.y += ball.speed.y;


总结

  • 速度和加速度是动画的基础元素,其中两者都是向量,包括了一个重要因素:方向。
  • 要学会应用 分解 合成 ,将速度或加速度分解到x、y轴上,然后将每条轴上的加速度或速度相加,然后再分别与物体的位置坐标相加。 


附录:

总要公式:

(1)将角速度分解为x、y轴上的速度向量

vx = speed * Math.cos(angle)

vy = spedd * Math.sin(angle)


(2)将角加速度分解为x、y轴上的加速度

ax = force * Math.cos(angle)

ay = force * Math.sin(angle)


(3)将加速度加入速度向量

vx += ax;

vy += ay;


(4)将速度向量加入位置坐标

object.x += vx;

object.y += vy;


下一章:边界与摩擦力



关注”全栈技术杂货铺“

全栈技术杂货铺