canvas動畫包教不包會：速度與加速度

var vx = 1;  //定義x軸速度
var vy = 1;  //定義y軸速度
沿x軸正方向：ball.x += vx;
沿x軸反方向：ball.x -= vx;
沿y軸正方向：ball.y += vy;
沿y軸反方向：ball.y -= vy;

ball.x += ball.speed.x;
// 或   
ball.y += ball.speed.y;

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

ball.x += 5;   
ball.y += 4;

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

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.3 重力加速度（g）

我想大家對重力加速度并不陌生，這是我們在生活中感覺最明顯，比如你往上跳一跳，隨后便會自然落下，這就是給你添加了一個重力加速度。

重力加速度簡單來說就是y軸上的一個加速度，在計算加速度時，我們只需將重力加速度g添加到每一幀的vy（y軸上的加速度和）屬性上就可以了。

我們來模擬一下重力加速度（點擊按鈕）：

原理：小球從空中自由降落至地面，然后彈起，循環(huán)往復(fù)，直到它最終速度為零停留在地面。

代碼解析：

var g = 0.3;   //重力加速度
var bounce = -0.7;  //反彈系數(shù)
//邊界檢測
if(ball.y >= (canvas.height - ball.radius * 2)) {   
  ball.y = canvas.height - ball.radius * 2;   
  ball.speed.y *= bounce;  //反復(fù)相乘，最后趨近于0   
};   
ball.speed.y += g;   
ball.y += ball.speed.y;

總結(jié)

• 速度和加速度是動畫的基礎(chǔ)元素，其中兩者都是向量，包括了一個重要因素：方向。
• 要學(xué)會應(yīng)用 分解 和 合成 ，將速度或加速度分解到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;

下一章：邊界與摩擦力