Tween support for gradient properties. fix #454

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Fixed
+
+* Tween support for gradient properties
+
 ## [2.3.0][2018-08-30]
 
 ### Added

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.3.0
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Sat Sep 08 2018
+ * Date: Mon Sep 10 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -12586,7 +12586,8 @@
         n,
         len,
         trueEnd,
-        trueStart;
+        trueStart,
+        endRGBA;
 
       // remove conflict from tween map if it exists
       tweenId = Konva.Tween.tweens[nodeId][key];
@@ -12617,12 +12618,30 @@
           }
         }
 
-        for (n = 0; n < len; n++) {
+        if (key.indexOf('fill') === 0) {
-          diff.push(end[n] - start[n]);
+          for (n = 0; n < len; n++) {
+            if (n % 2 === 0) {
+              diff.push(end[n] - start[n]);
+            } else {
+              var startRGBA = Konva.Util.colorToRGBA(start[n]);
+              endRGBA = Konva.Util.colorToRGBA(end[n]);
+              start[n] = startRGBA;
+              diff.push({
+                r: endRGBA.r - startRGBA.r,
+                g: endRGBA.g - startRGBA.g,
+                b: endRGBA.b - startRGBA.b,
+                a: endRGBA.a - startRGBA.a
+              });
+            }
+          }
+        } else {
+          for (n = 0; n < len; n++) {
+            diff.push(end[n] - start[n]);
+          }
         }
       } else if (colorAttrs.indexOf(key) !== -1) {
         start = Konva.Util.colorToRGBA(start);
-        var endRGBA = Konva.Util.colorToRGBA(end);
+        endRGBA = Konva.Util.colorToRGBA(end);
         diff = {
           r: endRGBA.r - start.r,
           g: endRGBA.g - start.g,
@@ -12663,8 +12682,28 @@
         if (Konva.Util._isArray(start)) {
           newVal = [];
           len = Math.max(start.length, end.length);
-          for (n = 0; n < len; n++) {
+          if (key.indexOf('fill') === 0) {
-            newVal.push((start[n] || 0) + diff[n] * i);
+            for (n = 0; n < len; n++) {
+              if (n % 2 === 0) {
+                newVal.push((start[n] || 0) + diff[n] * i);
+              } else {
+                newVal.push(
+                  'rgba(' +
+                    Math.round(start[n].r + diff[n].r * i) +
+                    ',' +
+                    Math.round(start[n].g + diff[n].g * i) +
+                    ',' +
+                    Math.round(start[n].b + diff[n].b * i) +
+                    ',' +
+                    (start[n].a + diff[n].a * i) +
+                    ')'
+                );
+              }
+            }
+          } else {
+            for (n = 0; n < len; n++) {
+              newVal.push((start[n] || 0) + diff[n] * i);
+            }
           }
         } else if (colorAttrs.indexOf(key) !== -1) {
           newVal =

src/Tween.js

@@ -232,7 +232,8 @@
         n,
         len,
         trueEnd,
-        trueStart;
+        trueStart,
+        endRGBA;
 
       // remove conflict from tween map if it exists
       tweenId = Konva.Tween.tweens[nodeId][key];
@@ -263,12 +264,30 @@
           }
         }
 
-        for (n = 0; n < len; n++) {
+        if (key.indexOf('fill') === 0) {
-          diff.push(end[n] - start[n]);
+          for (n = 0; n < len; n++) {
+            if (n % 2 === 0) {
+              diff.push(end[n] - start[n]);
+            } else {
+              var startRGBA = Konva.Util.colorToRGBA(start[n]);
+              endRGBA = Konva.Util.colorToRGBA(end[n]);
+              start[n] = startRGBA;
+              diff.push({
+                r: endRGBA.r - startRGBA.r,
+                g: endRGBA.g - startRGBA.g,
+                b: endRGBA.b - startRGBA.b,
+                a: endRGBA.a - startRGBA.a
+              });
+            }
+          }
+        } else {
+          for (n = 0; n < len; n++) {
+            diff.push(end[n] - start[n]);
+          }
         }
       } else if (colorAttrs.indexOf(key) !== -1) {
         start = Konva.Util.colorToRGBA(start);
-        var endRGBA = Konva.Util.colorToRGBA(end);
+        endRGBA = Konva.Util.colorToRGBA(end);
         diff = {
           r: endRGBA.r - start.r,
           g: endRGBA.g - start.g,
@@ -309,8 +328,28 @@
         if (Konva.Util._isArray(start)) {
           newVal = [];
           len = Math.max(start.length, end.length);
-          for (n = 0; n < len; n++) {
+          if (key.indexOf('fill') === 0) {
-            newVal.push((start[n] || 0) + diff[n] * i);
+            for (n = 0; n < len; n++) {
+              if (n % 2 === 0) {
+                newVal.push((start[n] || 0) + diff[n] * i);
+              } else {
+                newVal.push(
+                  'rgba(' +
+                    Math.round(start[n].r + diff[n].r * i) +
+                    ',' +
+                    Math.round(start[n].g + diff[n].g * i) +
+                    ',' +
+                    Math.round(start[n].b + diff[n].b * i) +
+                    ',' +
+                    (start[n].a + diff[n].a * i) +
+                    ')'
+                );
+              }
+            }
+          } else {
+            for (n = 0; n < len; n++) {
+              newVal.push((start[n] || 0) + diff[n] * i);
+            }
           }
         } else if (colorAttrs.indexOf(key) !== -1) {
           newVal =

test/unit/Tween-test.js

@@ -170,6 +170,49 @@ suite('Tween', function() {
     tween.play();
   });
 
+  test('gradient tweening', function(done) {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: 100,
+      y: stage.getHeight() / 2,
+      radius: 70,
+      fillLinearGradientStartPoint: { x: -50, y: -50 },
+      fillLinearGradientEndPoint: { x: 50, y: 50 },
+      fillLinearGradientColorStops: [0, 'red', 0.5, 'blue']
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    var duration = 0.1;
+    var endFill = [0.5, 'red', 1, 'black'];
+
+    var tween = new Konva.Tween({
+      node: circle,
+      duration: duration,
+      fillLinearGradientColorStops: endFill,
+      onFinish: function() {
+        assert.deepEqual(
+          [0.5, 'rgba(255,0,0,1)', 1, 'rgba(0,0,0,1)'],
+          circle.fillLinearGradientColorStops()
+        );
+        done();
+      }
+    });
+
+    tween.seek(duration * 0.5);
+    assert.deepEqual(
+      [0.25, 'rgba(255,0,0,1)', 0.75, 'rgba(0,0,128,1)'],
+      circle.fillLinearGradientColorStops()
+    );
+
+    tween.seek(0);
+    tween.play();
+  });
+
   test('to method', function(done) {
     var stage = addStage();