JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.2.js"></script>
<div id="container"></div>

JavaScript

var stage = new Kinetic.Stage({
    container: "container",
    width: 578,
    height: 300
});
//anchor 1
var an1 = {
    x: 100,
    y: 250
};

//control point 1
var cp1 = {
    x: 100,
    y: 100
};


var cp2 = {
    x: 400,
    y: 100
};

var an2 = {
    x: 400,
    y: 250
};

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: an1.x,
    y: an1.y,
    radius: 20,
    fill: "red",
    stroke: "black",
    strokeWidth: 4
});


var circleCP1= new Kinetic.Circle({
    x: cp1.x,
    y: cp1.y,
    radius: 10,
    fill: "blue"
});

layer.add(circleCP1);


var circleCP2= new Kinetic.Circle({
    x: cp2.x,
    y: cp2.y,
    radius: 10,
    fill: "blue"
});

layer.add(circleCP2);


var arc = new Kinetic.Shape({
    drawFunc: function() {
        var context = this.getContext();
        context.beginPath();
        context.moveTo(an1.x, an1.y);
        context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, an2.x, an2.y);


        this.stroke();
    },

    stroke: "black",
    strokeWidth: 4
});

// add the arc shape to the layer
layer.add(arc);

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);

var genObject = {x:an1.x, y:an1.y};

function draw(){
    circle.setX(genObject.x);
    circle.setY(genObject.y);
    layer.draw();
}

TweenLite.to(genObject, 3, {
    bezier:{type:'cubic', values:[{x:an1.x, y:an1.y},{x:cp1.x, y:cp1.y}, {x:cp2.x, y:cp2.y}, {x:an2.x, y:an2.y}]}, onUpdate:draw, delay:.5});





;