Animations can now be tied to multiple layers. Removed Transition and Tween class from the build. Unhooked transition unit and manual tests for now. Added new animation setLayers() and getLayers() methods

2025-09-19 19:07:59 +08:00 · 2013-05-05 20:57:31 -07:00
parent d75fd4b40a
commit e66e147274
8 changed files with 152 additions and 45 deletions
--- a/5
+++ b/5
@@ -4,8 +4,8 @@ require 'uglifier'
 class Build < Thor  
  # This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
  FILES = [
-    "src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
-    "src/Node.js", "src/Animation.js", "src/DragAndDrop.js", "src/Transition.js", "src/Container.js", "src/Shape.js", "src/Stage.js", "src/Layer.js", "src/Group.js",
+    "src/Global.js", "src/util/Type.js", "src/Canvas.js", "src/util/Transform.js", "src/util/Collection.js",
+    "src/Node.js", "src/Animation.js", "src/DragAndDrop.js", "src/Container.js", "src/Shape.js", "src/Stage.js", "src/Layer.js", "src/Group.js",
    "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Wedge.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Spline.js", "src/shapes/Blob.js", "src/shapes/Sprite.js",
    "src/filters/Grayscale.js", "src/filters/Brighten.js", "src/filters/Invert.js", "src/filters/Blur.js", "src/filters/Mask.js",
    "src/plugins/Path.js", "src/plugins/TextPath.js", "src/plugins/RegularPolygon.js", "src/plugins/Star.js", "src/plugins/Label.js"       
@@ -21,7 +21,6 @@ class Build < Thor
  	"tests/js/unit/layerTests.js", 
  	"tests/js/unit/shapeTests.js", 
  	"tests/js/unit/ddTests.js", 
-  	"tests/js/unit/transitionTests.js", 
  	"tests/js/unit/shapes/rectTests.js", 
  	"tests/js/unit/shapes/circleTests.js", 
  	"tests/js/unit/shapes/wedgeTests.js", 
--- a/src/Animation.js
+++ b/src/Animation.js
@@ -1,14 +1,13 @@
 (function() {
    /**
-     * Stage constructor.  A stage is used to contain multiple layers and handle
-     * animations
+     * Animation constructor.  A stage is used to contain multiple layers and handle
     * @constructor
     * @param {Function} func function executed on each animation frame
-     * @param {Kinetic.Node} [node] node to be redrawn.&nbsp; Can be a layer or the stage.  Not specifying a node will result in no redraw.
+     * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn.&nbsp; Can be a layer, an array of layers, or null.  Not specifying a node will result in no redraw.
     */
-    Kinetic.Animation = function(func, node) {
+    Kinetic.Animation = function(func, layers) {
        this.func = func;
-        this.node = node;
+        this.setLayers(layers);
        this.id = Kinetic.Animation.animIdCounter++;
        this.frame = {
            time: 0,
@@ -20,6 +19,37 @@
     * Animation methods
     */
    Kinetic.Animation.prototype = {
+        /**
+         * set layers to be redrawn on each animation frame
+         * @name setLayers
+         * @methodOf Kinetic.Animation.prototype
+         * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn.&nbsp; Can be a layer, an array of layers, or null.  Not specifying a node will result in no redraw.
+         */
+        setLayers: function(layers) {
+            var lays = []; 
+            // if passing in no layers
+            if (!layers) {
+                lays = null;
+            }
+            // if passing in an array of Layers
+            else if (Kinetic.Type._isArray(layers)) {
+                lays = layers;
+            }
+            // if passing in a Layer
+            else {
+                lays = [layers];
+            }
+
+            this.layers = lays;
+        },
+        /**
+         * get layers
+         * @name getLayers
+         * @methodOf Kinetic.Animation.prototype
+         */
+        getLayers: function() {
+            return this.layers;
+        },
        /**
         * determine if animation is running or not.  returns true or false
         * @name isRunning
@@ -81,7 +111,10 @@
    };

    Kinetic.Animation._runFrames = function() {
-        var nodes = {}, animations = this.animations;
+        var layerHash = {}, 
+            animations = this.animations,
+            len = animations.length,
+            anim, layers, func, n, i, layersLen, layer, key;
        /*
         * loop through all animations and execute animation
         *  function.  if the animation object has specified node,
@@ -93,20 +126,31 @@
         * WARNING: don't cache animations.length because it could change while
         * the for loop is running, causing a JS error
         */
-        for(var n = 0; n < animations.length; n++) {
-            var anim = animations[n], node = anim.node, func = anim.func;
+        for(n = 0; n < len; n++) {
+            anim = animations[n];
+            layers = anim.layers; 
+            func = anim.func;
+
            anim._updateFrameObject(new Date().getTime());
-            if(node && node._id !== undefined) {
-                nodes[node._id] = node;
-            }
-            // if animation object has a function, execute it
-            if(func) {
-                func(anim.frame);
+
+            if (layers) {
+                layersLen = layers.length;
+
+                for (i=0; i<layersLen; i++) {
+                    layer = layers[i]
+                    if(layer._id !== undefined) {
+                        layerHash[layer._id] = layer;
+                    }
+                    // if animation object has a function, execute it
+                    if(func) {
+                        func(anim.frame);
+                    }
+                }
            }
        }

-        for(var key in nodes) {
-            nodes[key].draw();
+        for(key in layerHash) {
+            layerHash[key].draw();
        }
    };
    Kinetic.Animation._animationLoop = function() {
--- a/src/DragAndDrop.js
+++ b/src/DragAndDrop.js
@@ -87,8 +87,7 @@
            layer = this.getLayer(), 
            pos = stage.getPointerPosition(),
            m = this.getTransform().getTranslation(), 
-            ap = this.getAbsolutePosition(), 
-            animNode = layer || this;
+            ap = this.getAbsolutePosition();
                
        if(pos) {
            if (dd.node) {
@@ -98,7 +97,7 @@
            dd.node = this;
            dd.offset.x = pos.x - ap.x;
            dd.offset.y = pos.y - ap.y;
-            dd.anim.node = animNode;
+            dd.anim.setLayers(layer || this.getLayers());
            dd.anim.start();
        }
    };
--- a/src/Stage.js
+++ b/src/Stage.js
@@ -328,6 +328,14 @@
        getLayer: function() {
            return null;
        },
+        /**
+         * get layers
+         * @name getLayers
+         * @methodOf Kinetic.Stage.prototype
+         */
+         getLayers: function() {
+             return this.getChildren();
+         },
        _setPointerPosition: function(evt) {
            if(!evt) {
                evt = window.event;
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -17,7 +17,7 @@
            easingFunc = Kinetic.Tweens[easing],
            duration = config.duration || 0,
            configVal = null,
-            lastTweenIndex = 0;
+            lastTween = null;

        this.tweens = [];
        this.attrs = {};
@@ -30,25 +30,25 @@
            }
        }

-        lastTweenIndex = this.tweens.length - 1;
+        lastTween = this.tweens[this.tweens.length - 1];

-        // map first tween event to transition event
-        this.tweens[lastTweenIndex].onStarted = function() {
+        // map first last event to transition event
+        lastTween.onStarted = function() {

        };
-        this.tweens[lastTweenIndex].onStopped = function() {
+        lastTween.onStopped = function() {
            anim.stop();
        };
-        this.tweens[lastTweenIndex].onResumed = function() {
+        lastTween.onResumed = function() {
            anim.start();
        };
-        this.tweens[lastTweenIndex].onLooped = function() {
+        lastTween.onLooped = function() {

        };
-        this.tweens[lastTweenIndex].onChanged = function() {
+        lastTween.onChanged = function() {

        };
-        this.tweens[lastTweenIndex].onFinished = function() {
+        lastTween.onFinished = function() {
            var newAttrs = {};
            // create new attr obj
            for(var key in config) {
@@ -67,15 +67,22 @@
     * Transition methods
     */
    Kinetic.Transition.prototype = {
+        _mapTweens: function(method) {
+            var tweens = this.tweens,
+                len = tweens.length,
+                n;
+
+            for(n = 0; n < len; n++) {
+                tweens[n][method]();
+            }
+        },
        /**
         * start transition
         * @name start
         * @methodOf Kinetic.Transition.prototype
         */
        start: function() {
-            for(var n = 0; n < this.tweens.length; n++) {
-                this.tweens[n].start();
-            }
+            this._mapTweens('start');
        },
        /**
         * stop transition
--- a/src/shapes/Sprite.js
+++ b/src/shapes/Sprite.js
@@ -68,7 +68,7 @@
             *  below.  The anim object only needs the layer reference for
             *  redraw
             */
-            this.anim.node = layer;
+            this.anim.setLayers(layer);

            this.interval = setInterval(function() {
                var index = that.getIndex();
--- a/tests/js/manualTests.js
+++ b/tests/js/manualTests.js
@@ -1,5 +1,5 @@
 Test.Modules.TRANSITION = {
-    'transition position and rotation': function(containerId) {
+    '!transition position and rotation': function(containerId) {
        var stage = new Kinetic.Stage({
            container: containerId,
            width: 578,
@@ -29,7 +29,7 @@ Test.Modules.TRANSITION = {

        // transition 1
        rect.transitionTo({
-            duration: 5,
+            duration: 3,
            x: 400,
            y: 30,
            fillR: blue.r,
@@ -46,13 +46,13 @@ Test.Modules.TRANSITION = {

        // transition 2
        rect.transitionTo({
-            duration: 5,
+            duration: 3,
            shadowOffsetX: 80, 
            rotation: Math.PI * 2,
            easing: 'bounce-ease-out'
        });
    },
-    'all transition types': function(containerId) {
+    '!all transition types': function(containerId) {
        document.getElementById(containerId).style.height = '300px';

        var stage = new Kinetic.Stage({
@@ -85,7 +85,7 @@ Test.Modules.TRANSITION = {

        stage.add(layer);
    },
-    'ease-in, ease-out, ease-in-out hovers': function(containerId) {
+    '!ease-in, ease-out, ease-in-out hovers': function(containerId) {
        function addHovers(shape, easing) {
            shape.on("mouseover", function() {
                if (this.trans) {
@@ -209,6 +209,48 @@ Test.Modules.ANIMATION = {
            anim.stop();
        }, 3000);
    },
+    'animation with two layers': 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);
+
+        var layer2 = new Kinetic.Layer();
+        var rect2 = new Kinetic.Rect({
+            x: 250,
+            y: 100,
+            width: 100,
+            height: 50,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        layer2.add(rect2);
+        stage.add(layer);
+        stage.add(layer2);
+
+        var anim = new Kinetic.Animation(function(frame) {
+            rect.rotateDeg(1);
+            rect2.rotateDeg(1);
+        }, [layer, layer2]);
+
+        anim.start();
+
+    },
    'test multiple animations': function(containerId) {
        var stage = new Kinetic.Stage({
            container: containerId,
@@ -1409,7 +1451,7 @@ Test.Modules.DRAG_AND_DROP = {


    },
-    'transition stage width': function(containerId) {
+    '!transition stage width': function(containerId) {
        var stage = new Kinetic.Stage({
            container: containerId,
            width: 578,
@@ -1438,7 +1480,7 @@ Test.Modules.DRAG_AND_DROP = {

        
    },
-    'transition gaussian blur filter': function(containerId) {
+    '!transition gaussian blur filter': function(containerId) {
        var imageObj = new Image();
        imageObj.onload = function() {
            var stage = new Kinetic.Stage({
@@ -1459,9 +1501,14 @@ Test.Modules.DRAG_AND_DROP = {
            layer.add(darth);
            stage.add(layer);

+            var trans = null;
+
    
            darth.on('mouseover', function() {
-                darth.transitionTo({
+                if (trans) {
+                    trans.stop();
+                }
+                trans = darth.transitionTo({
                    easing: 'ease-in-out',
                    duration: 0.5,
                    filterRadius: 0
@@ -1469,7 +1516,10 @@ Test.Modules.DRAG_AND_DROP = {
            });

            darth.on('mouseout', function() {
-                darth.transitionTo({
+                if (trans) {
+                    trans.stop();
+                }
+                trans = darth.transitionTo({
                    easing: 'ease-in-out',
                    duration: 0.5,
                    filterRadius: 20
--- a/tests/js/unit/nodeTests.js
+++ b/tests/js/unit/nodeTests.js
@@ -2609,7 +2609,7 @@ Test.Modules.NODE = {
        test(Kinetic.Global.shapes[circleColorKey] === undefined, 'circle color key should not be in shapes hash');
        test(Kinetic.Global.shapes[rectColorKey] === undefined, 'rect color key should not be in shapes hash');
    },
-    'destroy node mid transition': function(containerId) {
+    '!destroy node mid transition': function(containerId) {
        var stage = new Kinetic.Stage({
            container: containerId,
            width: 578,