Javascript 如何在Kineticjs中为曲线路径上的对象设置动画

我想创建一个路径作为一些曲线，可能是四元曲线。这可以类似于

然后我可以创建图像对象。但是，我希望沿创建的路径设置动画（将其从曲线的起点移动到终点）。我可以使用Javascript+Canvas+KineticJS（V4.7.1）。有没有办法，怎么做？我找不到任何解决这个问题的例子。

演示：

可以使用以下公式沿二次曲线计算点：

// 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} );
}

你通过：

• 曲线点（起始点、控制点、结束点）
• 沿曲线计算XY（T）的间隔
• 注：曲线起点处T==0，曲线终点处T==1.00

然后，可以创建沿曲线设置动画的Kinetic.动画：

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);

var animation=new dynamic.animation（函数（帧）{
//沿间隔T的曲线计算XY
var pos=getQuadraticBezierXYatT（qStart、qControl、qEnd、T/100）；
//将某个运动物体设置到该位置
设置位置（pos）；
//为下一个动画帧更改T
T+=T方向；
如果（T100）{TDirection*=-1；T+=TDirection}
}，层）；

演示：

可以使用以下公式沿二次曲线计算点：

// 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} );
}

你通过：

• 曲线点（起始点、控制点、结束点）
• 沿曲线计算XY（T）的间隔
• 注：曲线起点处T==0，曲线终点处T==1.00

然后，可以创建沿曲线设置动画的Kinetic.动画：

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);

var animation=new dynamic.animation（函数（帧）{
//沿间隔T的曲线计算XY
var pos=getQuadraticBezierXYatT（qStart、qControl、qEnd、T/100）；
//将某个运动物体设置到该位置
设置位置（pos）；
//为下一个动画帧更改T
T+=T方向；
如果（T100）{TDirection*=-1；T+=TDirection}
}，层）；

演示：

可以使用以下公式沿二次曲线计算点：

// 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} );
}

你通过：

• 曲线点（起始点、控制点、结束点）
• 沿曲线计算XY（T）的间隔
• 注：曲线起点处T==0，曲线终点处T==1.00

然后，可以创建沿曲线设置动画的Kinetic.动画：

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);

var animation=new dynamic.animation（函数（帧）{
//沿间隔T的曲线计算XY
var pos=getQuadraticBezierXYatT（qStart、qControl、qEnd、T/100）；
//将某个运动物体设置到该位置
设置位置（pos）；
//为下一个动画帧更改T
T+=T方向；
如果（T100）{TDirection*=-1；T+=TDirection}
}，层）；

演示：

可以使用以下公式沿二次曲线计算点：

// 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} );
}

你通过：

• 曲线点（起始点、控制点、结束点）
• 沿曲线计算XY（T）的间隔
• 注：曲线起点处T==0，曲线终点处T==1.00

然后，可以创建沿曲线设置动画的Kinetic.动画：

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);

var animation=new dynamic.animation（函数（帧）{
//沿间隔T的曲线计算XY
var pos=getQuadraticBezierXYatT（qStart、qControl、qEnd、T/100）；
//将某个运动物体设置到该位置
设置位置（pos）；
//为下一个动画帧更改T
T+=T方向；
如果（T100）{TDirection*=-1；T+=TDirection}
}，层）；

我不知道kineticJS，但我知道你可以用这个库让元素跟随一行：我不知道kineticJS，但我知道你可以用这个库让元素跟随一行：我不知道kineticJS，但我知道你可以用这个库让元素跟随一行：我不知道kineticJS，但我知道，您可以使用此库使元素跟随一行：谢谢。getQuadraticBezierXYatT函数是否存在任何源？如果给定了运动的持续时间，如何影响动画的速度？

getQuadraticBezierXYatT（）

使用de Casteljau的算法绘制重构后的Bezier曲线，其中两个控制点相同（具有相同控制点的三次Bezier曲线是二次曲线）。你可以通过改变方向来影响移动的速度。谢谢你的算法名。我发现，方向改变了运动的速度，但我不能根据整个运动的给定时间来计算方向的值，一个动态动画会给你们一个计时器。frame.time提供动画已运行的毫秒数。你可以用这段时间来根据经过的时间用增量来代替TDirection。对不起，我不明白这一点。如果我想在2秒内将对象从A点移动到B点，frame.time如何帮助我？使用setInterval或类似的东西不是更容易吗？谢谢。getQuadraticBezierXYatT函数是否存在任何源？如果给定了运动的持续时间，如何影响动画的速度？

getQuadraticBezierXYatT（）

使用de Casteljau的算法绘制重构后的Bezier曲线，其中两个控制点相同（具有相同控制点的三次Bezier曲线是二次曲线）。你可以通过改变方向来影响移动的速度。谢谢你的算法名。我发现，方向改变了运动的速度，但我不能根据整个运动的给定时间来计算方向的值，一个动态动画会给你们一个计时器。frame.time提供动画已运行的毫秒数。你可以用这段时间来根据经过的时间用增量来代替TDirection。对不起，我不明白这一点。如果我想在2秒内将物体从A点移动到B点，fra怎么能