如何Kineticjs曲线路径动画对象 [英] How to animate object on curve path in Kineticjs

问题描述

我想创建一个路径一些曲线，大概四曲线。它同样可以做<一href=\"http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/\" rel=\"nofollow\">http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/

I would like to create a path as some curve, probably quad curve. It can be done similarly to http://www.html5canvastutorials.com/labs/html5-canvas-modify-curves-with-anchor-points-using-kineticjs/

然后我能够创建图像对象。不过，我想它的动画沿路径创建（它从开始点移动到结束曲线的点）。我可以使用JavaScript +帆布+ KineticJS（V 4.7.1）。有什么办法，怎么办呢？我找不到解决了这个任何实际的例子。

Then I am able to create image object. However, I want to animate it along the created path (move it from start point to end point of the curve). I can use Javascript+Canvas+KineticJS(v 4.7.1). Is there any way, how to do it? I can't find any example which solves this.

推荐答案

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

您可以沿着这个公式二次曲线计算几点：

You can calculate points along a quadratic curve with this formula:

// 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 == 1.00在曲线的末端启动T == 0

然后，您可以创建沿曲线动画一个Kinetic.Animation：

Then you can create a Kinetic.Animation that animates along the curve:

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

这篇关于如何Kineticjs曲线路径动画对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！