fixed small bug related to animations - if you called .start() multiple times, multiple animation instances would be created. This wasn't desirable. Also beefed up animation unit tests

dist/kinetic-core.js

@@ -1306,9 +1306,12 @@ Kinetic.Stage.prototype = {
      * start animation
      */
     start: function() {
+        if(!this.animRunning) {
             var go = Kinetic.GlobalObject;
             go._addAnimation(this.anim);
             go._handleAnimation();
+            this.animRunning = true;
+        }
     },
     /**
      * stop animation
@@ -1316,7 +1319,7 @@ Kinetic.Stage.prototype = {
     stop: function() {
         var go = Kinetic.GlobalObject;
         go._removeAnimation(this.anim);
-        go._handleAnimation();
+        this.animRunning = false;
     },
     /**
      * draw children
@@ -2149,6 +2152,7 @@ Kinetic.Stage.prototype = {
         this.ids = {};
         this.names = {};
         this.anim = undefined;
+        this.animRunning = false;
     }
 };
 // Extend Container and Node

src/Stage.js

@@ -67,9 +67,12 @@ Kinetic.Stage.prototype = {
      * start animation
      */
     start: function() {
+        if(!this.animRunning) {
             var go = Kinetic.GlobalObject;
             go._addAnimation(this.anim);
             go._handleAnimation();
+            this.animRunning = true;
+        }
     },
     /**
      * stop animation
@@ -77,7 +80,7 @@ Kinetic.Stage.prototype = {
     stop: function() {
         var go = Kinetic.GlobalObject;
         go._removeAnimation(this.anim);
-        go._handleAnimation();
+        this.animRunning = false;
     },
     /**
      * draw children
@@ -910,6 +913,7 @@ Kinetic.Stage.prototype = {
         this.ids = {};
         this.names = {};
         this.anim = undefined;
+        this.animRunning = false;
     }
 };
 // Extend Container and Node

tests/js/unitTests.js

@@ -2528,7 +2528,7 @@ Test.prototype.tests = {
     //  ANIMATION tests
     ////////////////////////////////////////////////////////////////////////
 
-    'ANIMATION - stage and global object animation properties': function(containerId) {
+    'ANIMATION - test start and stop': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2554,14 +2554,88 @@ Test.prototype.tests = {
         var centerX = stage.getWidth() / 2 - 100 / 2;
 
         stage.onFrame(function(frame) {
-            rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
+            rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
             layer.draw();
         });
-        // TODO: need to re-add support for stop
+        var go = Kinetic.GlobalObject;
+
+        test(go.animations.length === 0, 'should be no animations running');
+        test(stage.animRunning === false, 'animRunning should be false');
 
         stage.start();
 
+        test(go.animations.length === 1, 'should be 1 animation running');
+        test(stage.animRunning === true, 'animRunning should be true');
+
+        stage.start();
+
+        test(go.animations.length === 1, 'should be 1 animation running');
+        test(stage.animRunning === true, 'animRunning should be true');
+
         stage.stop();
 
+        test(go.animations.length === 0, 'should be no animations running');
+        test(stage.animRunning === false, 'animRunning should be false');
+
+        stage.stop();
+
+        test(go.animations.length === 0, 'should be no animations running');
+        test(stage.animRunning === false, 'animRunning should be false');
+    },
+    ////////////////////////////////////////////////////////////////////////
+    //  TRANSITION tests
+    ////////////////////////////////////////////////////////////////////////
+
+    'TRANSITION - start animation when transition completes': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var rect = new Kinetic.Rect({
+            x: 200,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer.add(rect);
+        stage.add(layer);
+
+        var amplitude = 150;
+        var period = 1000;
+        // in ms
+        var centerX = 200;
+
+        stage.onFrame(function(frame) {
+            rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
+            layer.draw();
+        });
+
+        stage.start();
+        stage.stop();
+        centerX = 300;
+
+        var go = Kinetic.GlobalObject;
+        test(go.animations.length === 0, 'should be no animations running');
+        test(stage.animRunning === false, 'animRunning should be false');
+
+        rect.transitionTo({
+            x: 300,
+            duration: 1,
+            callback: function() {
+                test(go.animations.length === 0, 'should be no animations running');
+                test(stage.animRunning === false, 'animRunning should be false');
+
+                stage.start();
+
+                test(go.animations.length === 1, 'should be no animations running');
+                test(stage.animRunning === true, 'animRunning should be false');
+            }
+        });
     }
 };