如何在Kineticjs中為曲線路徑上的對象設置動畫

Question

我想將路徑創建為某些曲線，可能是四邊形曲線。 可以類似於http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/

然后，我可以創建圖像對象。 但是，我想沿創建的路徑為其設置動畫（將其從曲線的起點移動到終點）。 我可以使用Javascript + Canvas + KineticJS（v 4.7.1）。 有什么辦法，怎么辦？ 我找不到解決此問題的任何示例。

Answer 1

演示： http ： //jsfiddle.net/m1erickson/nnU89/

您可以使用以下公式計算沿二次曲線的點：

// Calc an XY along a quadratic curve at interval T
// T==0.00 at start of curve, T==1.00 at end of curve
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} );
}

您傳遞：

• 曲線點（startPt，controlPt，EndingPt）
• 沿曲線計算XY（T）的間隔
• 注意：曲線起點處T == 0，曲線終點處T == 1.00

然后，您可以創建沿曲線設置動畫的Kinetic.Animation：

var animation = new Kinetic.Animation(function(frame) {

    // calc an XY along the curve at interval T

    var pos=getQuadraticBezierXYatT(qStart,qControl,qEnd,T/100);

    // set some Kinetic object to that position

    yourObject.setPosition(pos);    

    // change T for the next animation frame

    T+=TDirection;
    if(T<0 || T>100){ TDirection*=-1; T+=TDirection}

}, layer);