KineticJS Conditional Tweens (Simple Case)

http://stackoverflow.com/q/24768450/1093087

by klenwell

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
<div id="stage-container">
  canvas goes here!
</div>

CSS

body { background-color: black; color: white; }
#stage-container { width:250px; background-color: white; }

JavaScript

// Toggle true/false to change tween behavior below.
var PASS = true;

var stage = new Kinetic.Stage({
    container: 'stage-container',
    width: 250, height: 250
});

var layer = new Kinetic.Layer();
stage.add(layer);

function addSquare(x, y) {
    var rectangle = new Kinetic.Rect({
        x: x, y: y,
        width: 100, height: 100,
        fillRed: 0, fillGreen: 0, fillBlue: 255
    });
    
    // Need to add node to layer here
    layer.add(rectangle);

    var rectTweenFail = new Kinetic.Tween({
        node: rectangle,
        duration: 5,
        easing: Kinetic.Easings.Linear,
        fillRed: 255, fillGreen: 0, fillBlue: 0
    });

    var rectTweenPass = new Kinetic.Tween({
        node: rectangle,
        duration: 5,
        easing: Kinetic.Easings.Linear,
        fillRed: 0, fillGreen: 255, fillBlue: 0
    });

    return {
        node: rectangle,
        tweenPass: rectTweenPass,
        tweenFail: rectTweenFail
    }
}

var square1 = addSquare(15, 15);
if (PASS)
    square1.tweenPass.play();
else
    square1.tweenFail.play();

var square2 = addSquare(135, 135);
if (! PASS)
    square2.tweenPass.play();
else {
    square2.fill('red');
    //square2.tweenFail.play();
}

layer.draw();