使用javascript的canvas動畫插值運動

Question

我正在嘗試使用javascript和canvas進行運動插值。我擁有所有的X，Y座標，但我不知道如何使場沿着弧線從位置A移動到位置B.

Answer 1

你的弧似乎是一條二次曲線。

您可以沿着這樣的二次曲線計算的插補點：

您需要提供您的起點和終點以及定義行的「彎曲度」的控制點。

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) { 
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return({x:x,y:y}); 
} 

這裏有一個演示：http://jsfiddle.net/m1erickson/56sZj/