How to tween Shape or Group alogn a bezier curve in KineticJS?

Question

I have a shape (RECT) and an custom shape which is an (ARC). How do i tween the RECT alogn my ARC? Same as PATH and MotionTween in SVG+SMIL?

 var triangle = new Kinetic.Shape({
    drawFunc: function(context) {
        context.beginPath();
        context.bezierCurveTo(0, 100, total_width / (total_width / 400), 100 / (total_width / 400), total_width, 100);
        context.setAttr('strokeStyle', 'red');
        context.setAttr('lineWidth', 4);
        context.stroke();
    },
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4
});

Answer 1

You can mathematically calculate [x,y] points along your Bezier curve and then move your rect to those points.

Demo: http://jsfiddle.net/m1erickson/79kcZ/

To use a Tween, you need to supply a fixed ending value. Therefore, you cannot use a Tween.

Therefore, it might be more direct to use an Animation rather than a Tween.

Here is a function that calculates an [x,y] point along a cubic Bezier at interval T.

When T==0.00, the point is the starting point of the curve.

When T==1.00, the point is the ending point of the curve.

function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
    var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
    var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
    return({x:x,y:y});
}

// cubic helper formula at T distance
function CubicN(pct, a,b,c,d) {
    var t2 = pct * pct;
    var t3 = t2 * pct;
    return a + (-a * 3 + pct * (3 * a - a * pct)) * pct
    + (3 * b + pct * (-6 * b + b * 3 * pct)) * pct
    + (c * 3 - c * 3 * pct) * t2
    + d * t3;
}