JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<h4>Rectangle animated along bezier path</h4>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}

JavaScript

var stage = new Kinetic.Stage({
    container: 'container',
    width: 750,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);


var rect = new Kinetic.Rect({
    x: 30,
    y: 50,
    width: 50,
    height: 35,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
});
layer.add(rect);
layer.draw();

var T = 0.00;
var delta = .01;
var s = {
    x: 25,
    y: 250
};
var c1 = {
    x: 100,
    y: 50
};
var c2 = {
    x: 175,
    y: 0
};
var e = {
    x: 225,
    y: 250
};

var anim = new Kinetic.Animation(function (frame) {
    var time = frame.time,
        timeDiff = frame.timeDiff,
        frameRate = frame.frameRate;

    T += delta;
    if (T < 0 || T > 1.00) {
        delta *= -1;
        T += delta;
    }
    var xy = getCubicBezierXYatT(s, c1, c2, e, T);
    rect.setPosition(xy);
    rect.draw();

}, layer);

anim.start();


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