## 速度与加速度 在上两章中,我们介绍了数学中三角函数的概念和使用,在这一章中,我们将介绍物理知识:速度向量与加速度。 真是坑爹!学完数学又要学习物理,真的是回到了初中......,不过你放心,这里介绍的都不是深奥的物理知识。 这一章的内容包括: - 速度向量 - 加速度 - 附录:重要公式 **1、速度向量** 速度向量和速度并不等同,后者仅仅是前者的一部分,前者还包括了一个重要因素:方向,因此,速度向量也可以说是某个方向上的速度。 方向在动画中是极其重要的,就比如说,你做一个赛车游戏,要是连方向都搞不清楚,那岂不是常常发生连环车祸。 我们可以将速度向量分为两种:单轴上的速度向量和双轴上的速度向量 **1.1 单轴上的速度向量** 单轴上的速度向量也就是把速度向量只放到X轴(水平运动)或Y轴(垂直运动)上。 ![](https://box.kancloud.cn/628c9e1cea8a9e805ee28c3616b09679_343x331.jpg) 如上图所示,单轴上的速度向量可以有四个方向: ``` 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 ,让其反方向运动): 实例:canvas-demo/oneDirection.html 关键代码: ``` 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 双轴上的速度向量** 我们也可以将双轴上的速度向量看做是任意方向上运动。 ![](https://box.kancloud.cn/b3aed29e28f6945ba5ab256b109ebaf2_232x133.jpg) 下面做一个实例,就好像发射炮弹一样: 实例:canvas-demo/twoDirection.html 重要代码: ``` ball.x += 5; ball.y += 4; ``` x轴的速度定为5,y轴的速度定为4。 当然,像上面这样直接在x方向和y方向上增加速度的情况比较少见,更多时候,我们都是知道物体在某个方向上以一定速度运动,这时,我们就需要求x方向和y方向上的速度了,怎么求呢? 接下来就要用到之前介绍的三角函数了。 举个例子:一个物体以每帧1像素的速度向45°(θ = 45°,v = 1)的方向移动 ![](https://box.kancloud.cn/b3aed29e28f6945ba5ab256b109ebaf2_232x133.jpg) 就像上图一样,我们可以将速度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轴运动,同样有四个方向。 ![](https://box.kancloud.cn/628c9e1cea8a9e805ee28c3616b09679_343x331.jpg) 看例子(你可以按键盘左键和右键看看): 当你按左键时,你会发现速度越来越慢,多度减速时甚至反方向运动了,当你按右键时,速度回越来越快,最后飞出了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轴上的加速度,这里就不出例子了,你可以试着改变上面的例子,给物体加入一个任何角度的加速度。 ![](https://box.kancloud.cn/aec6463ca58a301a3e0caeb2ef9d19d7_202x123.jpg) **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; ```