## 速度與加速度
在上兩章中，我們介紹了數學中三角函數的概念和使用，在這一章中，我們將介紹物理知識：速度向量與加速度。
真是坑爹！學完數學又要學習物理，真的是回到了初中......，不過你放心，這里介紹的都不是深奧的物理知識。
這一章的內容包括：
- 速度向量
- 加速度
- 附錄：重要公式
**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 ，讓其反方向運動）：
實例：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 雙軸上的速度向量**
我們也可以將雙軸上的速度向量看做是任意方向上運動。
下面做一個實例，就好像發射炮彈一樣：
實例：canvas-demo/twoDirection.html
重要代碼：
```
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;
```
