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

var rectangle = new Kinetic.Rect ({
    x: 75, y: 75,
    width: 100, height: 100,
    fillRed: 0, fillGreen: 0, fillBlue: 255
});
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,
});

if ( PASS )
    rectTweenPass.play();
else
    rectTweenFail.play();

stage.add(layer);
layer.draw();