《html5 canvas动画》——速度与加速度(2)

既然有匀速运动，当然就有变速运动喽！这一节我们介绍本章的另一个重要内容加速度。本节将分为下面几个部分：

• 加速度基本概念

• 沿坐标轴的加速度

• 加速度的合成与分解

• 重力加速度

• 太空船(运用实例)

• 本章总结

1.加速度基本概念

以防有的同学把物理知识都还给老师了！在这我先废话的介绍下加速度是什么，好吧！就一句话，加速度是描述物体速度变化快慢的物理量。我们知道速度是表征物体运动快慢的物理量，这里加速度是来表征速度的变化的。用物理上的时间/速度图来表示就是这个样子：

从图中我们可以看到，匀速运动的速度是一直保持不变的，而变速运动的速速是随着时间变化的。如图所示，这里展示了一个匀加速运动，在Δt的时间内，速度增加了Δv，那么加速度用公式就可以表示为 a= Δv / Δt。ok！恶心的物理公式就此打住吧！下面我们来看看在代码中是如何实现的吧。

2.沿坐标轴的加速度

在这里，我们先介绍沿着坐标轴的的加速度，具体代码如下：

1. <canvas id="canvas" width="500" height="500" style="background:#000;"> 
2.        your browser not support canvas 
3.    </canvas> 
4.    <script src="../js/ball.js"></script> //引入工具函数文件 
5.    <script src="../js/utils.js"></script> //引入球类 
6.    <script> 
7.        window.onload = function(){ 
8.            var canvas = document.****getElementById("canvas"); 
9.            var context = canvas.getContext("2d"); 
10.             
11.            var ball = new Ball(20); 
12.            ball.x = canvas.width/6; 
13.            ball.y = canvas.height/6; 
14.             
15.            var vx = 0, ax = 0.1; //定义初始速度vx, 定义加速度a 
16.            (function drawFrame(){ 
17.                window.requestAnimationFrame(drawFrame, canvas); 
18.                context.clearRect(0,0,canvas.width,canvas.height); 
19.                 
20.                vx += ax; //速度每一帧都加上加速度的值 
21.                ball.x += vx; 
22.                ball.draw(context); 
23.            }()); 
24.        } 
25.     </script> 

在上面的代码中我们首先，定义了速度和加速度，然后在动画循环中让速度每一帧都加上加速度，这样每一帧速度的值都在增加，球的位置相对来说每一帧就会增加的越来越多，反映到动画中就是运动的越来越块。这里我要感谢热心的网友给我推荐的GIF制作工具，让本文不再是干巴巴的文字与图片。废话不多说，上图：

匀速运动

加速运动



为了效果更加突出，这里放上了匀速运动的图片，与加速运动的图片做了一个对比。在示例代码中小球的运动方向沿着X轴，当然你也可以沿着Y轴，或者两者同时。当你同时在X轴和Y轴定义了加速度，你会发现和任意方向的速度一样，小球会沿着两者合速度的方向移动，这就引出了我们的下一部分--任意方向的加速度。

3.加速度的合成与分解

有了前一节关于速度的合成与分解的铺垫，这里就变得很简单了，加速度同样可以像速度那样合成分解。这里我们假设要让小球沿着30度的方向做加速度为0.05的加速运动，具体代码如下：

1. window.onload = function(){ 
2.            var canvas = document.getElementById("canvas"); 
3.            var context = canvas.getContext("2d"); 
4.             
5.            var ball = new Ball(20); 
6.            ball.x = 0; 
7.            ball.y = 0; 
8.             
9.            var vx = 0, vy = 0, //初始速度为0 
10.                ax = 0, ay = 0, //分加速度为0 
11.                angle = 30, //运动方向 
12.                aTotal = 0.05; // 定义加速度的大小 
13.             
14.            (function drawFrame(){ 
15.                window.requestAnimationFrame(drawFrame, canvas); 
16.                context.clearRect(0,0,canvas.width,canvas.height); 
17.                 
18.                //加速度分解 B5教程网 www.bcty365.com
19.                ax = Math.cos(30 * Math.PI/180)*aTotal; 
20.                ay = Math.sin(30 * Math.PI/180)*aTotal; 
21.                 
22.                vx += ax; 
23.                vy += ay; 
24.           
25.                ball.x += vx; 
26.                ball.y += vy; 
27.                ball.draw(context); 
28.            }()); 
29.        } 

具体效果如下图所示：



与任意方向速度的概念一样，我们设定加速度的大小，以及物体运动的方向。然后再动画循环中，将加速度分解到水平和垂直两个方向，然后让水平速度和垂直速度在每一帧都加上相对应的加速度值，我们就可以得到一个沿任意方向加速(减速)运行的小球。

4.重力加速度

在这一部分我们介绍加速度中比较特别的一个 —— 重力加速度。重力加速度其实是由两个物体间的引力形成的，到后面我们专门会有一个章节来介绍万有引力，并且将它运用于我们的动画之中。

对于这个特殊的加速度，我相信你对它应该不会感到陌生，因为在中学的课本中G这个符号不知道出现了多少次。我们需要知道的是，在地球上，任何一个物体从空中下落到地面，它都有一个竖直向下的加速度。

ok！代码时间，我们的题目是：小球从空中自由降落至地面，然后弹起，循环往复，直到它最终速度为零停留在地面。好吧！这次我们先看看模拟出来的效果：

具体代码如下：

1. window.onload = function(){ 
2.            var canvas = document.getElementById('canvas'); 
3.            var context = canvas.getContext('2d'); 
4.             
5.            var ball = new Ball(20, "red"); 
6.                ball.x = canvas.width/2 
7.                ball.y = canvas.height/2 - 200; 
8.                 
9.            var vy = 0,  //初始速度 
10.                 gravity = 0.2, //定义重力加速度 
11.                 bounce = -0.8; //定义反弹系数 
12.                  
13.            //碰撞检测 
14.            function checkGround(ball){ 
15.                if(ball.y + ball.radius > canvas.height){ 
16.                    ball.y = canvas.height - ball.radius; 
17.                    vy *= bounce; //速度反向并且减小 
18.                } 
19.            } 
20.  
21.            (function drawFramw(){ 
22.               window.requestAnimationFrame(drawFramw, canvas); 
23.               context.clearRect(0, 0, canvas.width, canvas.height); 
24.                
25.               vy += gravity; 
26.               ball.y += vy; 
27.                
28.               //碰撞检测 
29.               checkGround(ball); 
30.               ball.draw(context); 
31.            }()); 
32.    } 

在这段代码中，除了本章介绍的内容，还包括部分下一章会介绍的内容，但是以你们的聪明才智我相信这完全是小菜一碟，对吧！我们在初始化阶段定义了在Y轴方向的初始速度vy, 还有重力加速度gravity, 以及一个反弹系数bounce。这里面我们做了一个简单的碰撞检测，当小球下落到地面(也就是canvas画布的底部)，它的位置为 canvas.height - ball.radius，并且此时速度反弹，方向向上。然后再循环动画中调用碰撞检测函数，这样就出现了落地反弹的效果，至于为什么会最后停留在地面上，那是因为bounce是个小数，每碰撞一次vy 都会减小。好了，这只是一个简单的动画，我就不费嘴皮子了。

5.太空船

在这个实例中我们要达到的效果是：通过键盘上的方向键控制太空船朝着不同的方向运动。在这里我们需要新建一个spaceShip.js类文件，值得注意的是加上该文件你的js文件夹中应该包含了以下四个文件：

• utils.js

• arrow.js

• ball.js

• ship.js

ship.js文件的代码如下：

1. spaceShip.js文件 
2.  
3.     function SpaceShip(){ 
4.       this.x = 0; 
5.       this.y = 0; 
6.       this.width = 25; 
7.       this.height = 25; 
8.       this.rotation = 0; 
9.       this.showFlame = false; 
10.     } 
11.  
12.     SpaceShip.prototype.draw = function(context){ 
13.         context.save(); 
14.         context.beginPath(); 
15.         context.translate(this.x, this.y); 
16.         context.rotate(this.rotation); 
17.         context.strokeStyle = "#ffffff"; 
18.         context.moveTo(10, 0); 
19.         context.lineTo(-10, 10); 
20.         context.lineTo(-5, 0); 
21.         context.lineTo(-10, -10); 
22.         context.lineTo(10, 0); 
23.         context.closePath(); 
24.         context.stroke(); 
25.         if(this.showFlame == true){ 
26.             context.save() 
27.             context.beginPath(); 
28.             context.strokeStyle = "#f69"; 
29.             context.moveTo(-7.5, -5); 
30.             context.lineTo(-15, 0); 
31.             context.lineTo(-7.5, 5); 
32.             context.stroke(); 
33.             context.restore(); 
34.         } 
35.         context.restore(); 
36.     } 

效果图如下：



具体代码如下：
 

1. <canvas id="canvas" width="1000" height="500" style="background:#000;"> 
2.        your browser not support canvas 
3.    </canvas> 
4.    <script src="../js/utils.js"></script> 
5.    <script src="../js/spaceship.js"></script> 
6.     <script> 
7.       window.onload = function(){ 
8.           var canvas = document.getElementById('canvas'), 
9.               context = canvas.getContext('2d'); 
10.  
11.           var spaceShip = new SpaceShip(); 
12.               spaceShip.x = canvas.width/2; 
13.               spaceShip.y = canvas.height/2; 
14.            
15.          //初始化 
16.           var vr = 0, 
17.               vx = 0, 
18.               vy = 0, 
19.               ax = 0, 
20.               ay = 0, 
21.               angle = 0, 
22.               thrust = 0; 
23.                
24.           //通过方向键控制各变量的值 
25.           window.addEventListener('keydown',function(event){ 
26.               switch (event.keyCode){ 
27.                   case 37:    //left 
28.                       vr = -3; 
29.                       vx = 0; 
30.                       vy = 0; 
31.                       break; 
32.                   case 39:  //right 
33.                       vr = 3; 
34.                       vx = 0; 
35.                       vy = 0; 
36.                       break; 
37.                   case 38: //up 
38.                       spaceShip.showFlame = true; 
39.                       thrust = 0.05; 
40.                       break; 
41.                   case 40: 
42.                       ax = 0; 
43.                       ay = 0; 
44.                       vx = 0; 
45.                       vy = 0; 
46.                       break; 
47.               } 
48.           }, false); 
49.  
50.           window.addEventListener('keyup', function(event){ 
51.                vr = 0; 
52.                thrust = 0; 
53.                spaceShip.showFlame = false; 
54.           }, false); 
55.  
56.           (function drawFrame(){ 
57.               window.requestAnimationFrame(drawFrame, canvas); 
58.               context.clearRect(0, 0, canvas.width, canvas.height); 
59.                
60.               //角度 
61.               spaceShip.rotation += vr *Math.PI/180; 
62.                
63.               angle = spaceShip.rotation; 
64.               ax = Math.cos(angle)*thrust; 
65.               ay = Math.sin(angle)*thrust; 
66.                
67.               vx += ax; 
68.               vy += ay; 
69.            
70.               spaceShip.x += vx; 
71.               spaceShip.y += vy; 
72.                
73.               spaceShip.draw(context); 
74.  
75.           }()); 
76.       } 

好了，看看是不是挺炫的，现在只要通过键盘上的方向键你就能控制飞船朝任意的一个方向移动。把代码放到你的编辑器中亲手体验一把吧。虽然我们的太空船只是一个简单的多边形，但是它能喷火啊！哈哈！

6.总结

本章中要公式总结：

1. //任意方向速度 
2. vx = speed * Math.cos(angle); 
3. vy = speed * Math.sin(angle); 
4.  
5. //任意方向加速度 
6. ax = force * Math.cos(angle); 
7. ay = force * Math.xin(angle); 
8.  
9. //改变速度 
10. vx += ax; 
11. vx += ay; 
12.  
13. //改变位置 
14. object.x += vx; 
15. object.y += vy; 

好吧！到这里速度与加速度一章就告一段落了，我们讲解了基本的速度与加速度概念，并且结合前面的三角函数实现了很多不同的效果。简单的示例，是否能够勾起你无限的创造力呢？敬请期待下一章——边界与摩擦力

js代码下载：  《html5 canvas动画》.zip