如何在 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、endpointPt）
• 沿曲线计算 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);