Canvas學習筆記——動畫中摩擦力的運用

摩擦力是與物體運動方向相反的力。我們在處理物體運動時，常把物體分解水準(X軸)方向和豎直(Y軸)方向的運動(比如平抛運動)，但在處理摩擦力時，如果把摩擦力分解為X軸和Y軸上的阻力，就會出現某條軸上速度為0，而另一條軸還在運動的奇怪現象。為此，處理摩擦力時應将物體最終運動的方向作為基準。

首先計算出合速度：

var speed = Math.sqrt(vx * vx + vy * vy);      

分析後可知

夾角θ可通過Math.atan2算出：

var angle = Math.atan2(vy,vx);      

接下就是由速度減去摩擦力，但要注意不能速度變為負值，這樣會改變物體的運動狀态：

if(speed > friction) {
    speed -= friction;
} else {
    speed = 0;
}      

在得到中和了摩擦力的速度以後，再将速度分解為水準和豎直方向的運動：

vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;      

雖然上面是計算摩擦力的正确方法，但太過繁瑣了，還有一個簡便方法

(function() {
            window.requestAnimFrame(arguments.callee,canvas);
            ctx.clearRect(0,0,canvas.width,canvas.height);

            vx *= 0.9;
            vy *= 0.9;

            ball.x += vx;
            ball.y += vy;
            ball.draw(ctx);
})();      

就是将速度分量分别乘以一個摩擦力系數，這個方法的運動效果和之前沒有差别，但這個方法永遠不會停止，還需要做一些判斷以減少運算量：

if(Math.abs(vx) > 0.001) {
    vx *= friction;
    ball.x += vx;
}       

在了解了如何計算摩擦力後，再來看看它的應用。