tween color properties

CHANGELOG.md

@@ -13,6 +13,7 @@
     * new `getClientRect` method.
     * Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to `cache` method for all buildin Konva shapes.
     (only for your custom `Konva.Shape` instance).
+    * `Tween` now supports color properties (`fill`, `stroke`, `shadowColor`)
 
 ## 0.8.0 2015-02-04
 

src/Tween.js

@@ -11,7 +11,8 @@
     PLAYING = 2,
     REVERSING = 3,
 
-    idCounter = 0;
+    idCounter = 0,
+    colorAttrs = ['fill', 'stroke', 'shadowColor'];
 
     /**
      * Tween constructor.  Tweens enable you to animate a node between the current state and a new state.
@@ -115,9 +116,16 @@
                 for (n=0; n<len; n++) {
                     diff.push(end[n] - start[n]);
                 }
-
-            }
-            else {
+            } else if (colorAttrs.indexOf(key) !== -1) {
+                start = Konva.Util.colorToRGBA(start);
+                var endRGBA = Konva.Util.colorToRGBA(end);
+                diff = {
+                    r : endRGBA.r - start.r,
+                    g : endRGBA.g - start.g,
+                    b : endRGBA.b - start.b,
+                    a : endRGBA.a - start.a
+                };
+            } else {
                 diff = end - start;
             }
 
@@ -143,8 +151,13 @@
                     for (n=0; n<len; n++) {
                         newVal.push(start[n] + (diff[n] * i));
                     }
-                }
-                else {
+                }  else if (colorAttrs.indexOf(key) !== -1) {
+                    newVal = 'rgba(' +
+                            Math.round(start.r + diff.r * i) + ',' +
+                            Math.round(start.g + diff.g * i) + ',' +
+                            Math.round(start.b + diff.b * i) + ',' +
+                            Math.round(start.a + diff.a * i) + ')';
+                } else {
                     newVal = start + (diff * i);
                 }
 

test/manual/manual-test.js

@@ -303,4 +303,41 @@ suite('Manual', function() {
             layer.draw();
         });
     });
-});
+
+    test('tween color', function() {
+        var stage = addStage();
+
+        var layer = new Konva.Layer();
+
+        var circle = new Konva.Circle({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red',
+            stroke: 'blue',
+            strokeWidth: 4,
+            shadowOffsetX : 10,
+            shadowOffsetY : 10,
+            shadowColor : 'black'
+        });
+
+        var text = new Konva.Text({
+            text : 'click on circle to start tween'
+        });
+
+        layer.add(circle, text);
+        stage.add(layer);
+
+
+        circle.on('click', function() {
+            var tween = new Konva.Tween({
+                node: circle,
+                duration: 1,
+                fill : Konva.Util.getRandomColor(),
+                stroke : Konva.Util.getRandomColor(),
+                shadowColor : Konva.Util.getRandomColor()
+            });
+            tween.play();
+        });
+    });
+});

test/unit/Tween-test.js

@@ -139,4 +139,36 @@ suite('Tween', function() {
 
     });
 
+    test('color tweening', function(done) {
+        var stage = addStage();
+
+        var layer = new Konva.Layer();
+
+        var circle = new Konva.Circle({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red',
+            stroke: 'blue',
+            strokeWidth: 4
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var c = Konva.Util.colorToRGBA('green');
+        var endFill = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
+        var tween = new Konva.Tween({
+            node: circle,
+            duration: 0.1,
+            fill : endFill,
+            onFinish : function() {
+                assert.equal(endFill, circle.fill());
+                done();
+            }
+        });
+        tween.play();
+    });
+
+
 });