摘要：重力加速度在這一部分我們介紹加速度中比較特別的一個(gè)重力加速度。重力加速度其實(shí)是由兩個(gè)物體間的引力形成的，到后面我們專門會(huì)有一個(gè)章節(jié)來(lái)介紹萬(wàn)有引力，并且將它運(yùn)用于我們的動(dòng)畫之中。

在上一節(jié)中我們介紹了速度的基本概念，包括沿坐標(biāo)軸的速度，和更普適的任意方向的速度，在文章的最后我們做了一個(gè)鼠標(biāo)跟隨的示例，以及通過(guò)改變物體的rotation屬性做了一個(gè)關(guān)于速度的擴(kuò)展。通過(guò)上一節(jié)的學(xué)習(xí)你會(huì)發(fā)現(xiàn)我們的物體可以沿著任意方向運(yùn)動(dòng)，但是這還遠(yuǎn)遠(yuǎn)不夠，因?yàn)槲覀兊奈矬w都是在做勻速運(yùn)動(dòng)。
既然有勻速運(yùn)動(dòng)，當(dāng)然就有變速運(yùn)動(dòng)嘍！這一節(jié)我們介紹本章的另一個(gè)重要內(nèi)容加速度。本節(jié)將分為下面幾個(gè)部分：

加速度基本概念

沿坐標(biāo)軸的加速度

加速度的合成與分解

重力加速度

太空船(運(yùn)用實(shí)例)

本章總結(jié)

1.加速度基本概念

以防有的同學(xué)把物理知識(shí)都還給老師了！在這我先廢話的介紹下加速度是什么，好吧！就一句話，加速度是描述物體速度變化快慢的物理量。我們知道速度是表征物體運(yùn)動(dòng)快慢的物理量，這里加速度是來(lái)表征速度的變化的。用物理上的時(shí)間/速度圖來(lái)表示就是這個(gè)樣子：

從圖中我們可以看到，勻速運(yùn)動(dòng)的速度是一直保持不變的，而變速運(yùn)動(dòng)的速速是隨著時(shí)間變化的。如圖所示，這里展示了一個(gè)勻加速運(yùn)動(dòng)，在Δt的時(shí)間內(nèi)，速度增加了Δv，那么加速度用公式就可以表示為 a= Δv / Δt。ok！惡心的物理公式就此打住吧！下面我們來(lái)看看在代碼中是如何實(shí)現(xiàn)的吧。

2.沿坐標(biāo)軸的加速度

在這里，我們先介紹沿著坐標(biāo)軸的的加速度，具體代碼如下：

       your browser not support canvas
   
    //引入工具函數(shù)文件
    //引入球類
   

在上面的代碼中我們首先，定義了速度和加速度，然后在動(dòng)畫循環(huán)中讓速度每一幀都加上加速度，這樣每一幀速度的值都在增加，球的位置相對(duì)來(lái)說(shuō)每一幀就會(huì)增加的越來(lái)越多，反映到動(dòng)畫中就是運(yùn)動(dòng)的越來(lái)越塊。這里我要感謝熱心的網(wǎng)友給我推薦的GIF制作工具，讓本文不再是干巴巴的文字與圖片。廢話不多說(shuō)，上圖：

勻速運(yùn)動(dòng)

加速運(yùn)動(dòng)

為了效果更加突出，這里放上了勻速運(yùn)動(dòng)的圖片，與加速運(yùn)動(dòng)的圖片做了一個(gè)對(duì)比。在示例代碼中小球的運(yùn)動(dòng)方向沿著X軸，當(dāng)然你也可以沿著Y軸，或者兩者同時(shí)。當(dāng)你同時(shí)在X軸和Y軸定義了加速度，你會(huì)發(fā)現(xiàn)和任意方向的速度一樣，小球會(huì)沿著兩者合速度的方向移動(dòng)，這就引出了我們的下一部分--任意方向的加速度。

3.加速度的合成與分解

有了前一節(jié)關(guān)于速度的合成與分解的鋪墊，這里就變得很簡(jiǎn)單了，加速度同樣可以像速度那樣合成分解。這里我們假設(shè)要讓小球沿著30度的方向做加速度為0.05的加速運(yùn)動(dòng)，具體代碼如下：

window.onload = function(){
           var canvas = document.getElementById("canvas");
           var context = canvas.getContext("2d");
           
           var ball = new Ball(20);
           ball.x = 0;
           ball.y = 0;
           
           var vx = 0, vy = 0, //初始速度為0
               ax = 0, ay = 0, //分加速度為0
               angle = 30, //運(yùn)動(dòng)方向
               aTotal = 0.05; // 定義加速度的大小
           
           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0,0,canvas.width,canvas.height);
               
               //加速度分解
               ax = Math.cos(30 * Math.PI/180)*aTotal;
               ay = Math.sin(30 * Math.PI/180)*aTotal;
               
               vx += ax;
               vy += ay;
         
               ball.x += vx;
               ball.y += vy;
               ball.draw(context);
           }());
       }

具體效果如下圖所示：

與任意方向速度的概念一樣，我們?cè)O(shè)定加速度的大小，以及物體運(yùn)動(dòng)的方向。然后再動(dòng)畫循環(huán)中，將加速度分解到水平和垂直兩個(gè)方向，然后讓水平速度和垂直速度在每一幀都加上相對(duì)應(yīng)的加速度值，我們就可以得到一個(gè)沿任意方向加速(減速)運(yùn)行的小球。

4.重力加速度

在這一部分我們介紹加速度中比較特別的一個(gè) —— 重力加速度。重力加速度其實(shí)是由兩個(gè)物體間的引力形成的，到后面我們專門會(huì)有一個(gè)章節(jié)來(lái)介紹萬(wàn)有引力，并且將它運(yùn)用于我們的動(dòng)畫之中。

對(duì)于這個(gè)特殊的加速度，我相信你對(duì)它應(yīng)該不會(huì)感到陌生，因?yàn)樵谥袑W(xué)的課本中G這個(gè)符號(hào)不知道出現(xiàn)了多少次。我們需要知道的是，在地球上，任何一個(gè)物體從空中下落到地面，它都有一個(gè)豎直向下的加速度。

ok！代碼時(shí)間，我們的題目是：小球從空中自由降落至地面，然后彈起，循環(huán)往復(fù)，直到它最終速度為零停留在地面。好吧！這次我們先看看模擬出來(lái)的效果：

具體代碼如下：

window.onload = function(){
           var canvas = document.getElementById("canvas");
           var context = canvas.getContext("2d");
           
           var ball = new Ball(20, "red");
               ball.x = canvas.width/2
               ball.y = canvas.height/2 - 200;
               
           var vy = 0,  //初始速度
                gravity = 0.2, //定義重力加速度
                bounce = -0.8; //定義反彈系數(shù)
                
           //碰撞檢測(cè)
           function checkGround(ball){
               if(ball.y + ball.radius > canvas.height){
                   ball.y = canvas.height - ball.radius;
                   vy *= bounce; //速度反向并且減小
               }
           }

           (function drawFramw(){
              window.requestAnimationFrame(drawFramw, canvas);
              context.clearRect(0, 0, canvas.width, canvas.height);
              
              vy += gravity;
              ball.y += vy;
              
              //碰撞檢測(cè)
              checkGround(ball);
              ball.draw(context);
           }());
   }

在這段代碼中，除了本章介紹的內(nèi)容，還包括部分下一章會(huì)介紹的內(nèi)容，但是以你們的聰明才智我相信這完全是小菜一碟，對(duì)吧！我們?cè)诔跏蓟A段定義了在Y軸方向的初始速度vy, 還有重力加速度gravity, 以及一個(gè)反彈系數(shù)bounce。這里面我們做了一個(gè)簡(jiǎn)單的碰撞檢測(cè)，當(dāng)小球下落到地面(也就是canvas畫布的底部)，它的位置為 canvas.height - ball.radius，并且此時(shí)速度反彈，方向向上。然后再循環(huán)動(dòng)畫中調(diào)用碰撞檢測(cè)函數(shù)，這樣就出現(xiàn)了落地反彈的效果，至于為什么會(huì)最后停留在地面上，那是因?yàn)?b>bounce是個(gè)小數(shù)，每碰撞一次vy 都會(huì)減小。好了，這只是一個(gè)簡(jiǎn)單的動(dòng)畫，我就不費(fèi)嘴皮子了。

5.太空船

在這個(gè)實(shí)例中我們要達(dá)到的效果是：通過(guò)鍵盤上的方向鍵控制太空船朝著不同的方向運(yùn)動(dòng)。在這里我們需要新建一個(gè)spaceShip.js類文件，值得注意的是加上該文件你的js文件夾中應(yīng)該包含了以下四個(gè)文件：

utils.js

arrow.js

ball.js

ship.js

ship.js文件的代碼如下：

spaceShip.js文件

    function SpaceShip(){
      this.x = 0;
      this.y = 0;
      this.width = 25;
      this.height = 25;
      this.rotation = 0;
      this.showFlame = false;
    }

    SpaceShip.prototype.draw = function(context){
        context.save();
        context.beginPath();
        context.translate(this.x, this.y);
        context.rotate(this.rotation);
        context.strokeStyle = "#ffffff";
        context.moveTo(10, 0);
        context.lineTo(-10, 10);
        context.lineTo(-5, 0);
        context.lineTo(-10, -10);
        context.lineTo(10, 0);
        context.closePath();
        context.stroke();
        if(this.showFlame == true){
            context.save()
            context.beginPath();
            context.strokeStyle = "#f69";
            context.moveTo(-7.5, -5);
            context.lineTo(-15, 0);
            context.lineTo(-7.5, 5);
            context.stroke();
            context.restore();
        }
        context.restore();
    }

效果圖如下：

具體代碼如下：

 
       your browser not support canvas