Revert "feat(animation): Extend fabric.util.animate animating colors …

…and other properties (#6191)" This reverts commit 3da5b7f.
fabricjs · Mar 12, 2020 · 7b7b235 · 7b7b235
1 parent 9d063cd
commit 7b7b235
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 47 deletions.
diff --git a/src/mixins/animation.mixin.js b/src/mixins/animation.mixin.js
@@ -174,8 +174,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
       propPair = property.split('.');
     }
 
-    var propIsColor = _this.colorProperties.indexOf(property) > -1 || (propPair && _this.colorProperties.indexOf(propPair[1]) > -1);
-
     var currentValue = propPair
       ? this.get(propPair[0])[propPair[1]]
       : this.get(property);
@@ -184,25 +182,23 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
       options.from = currentValue;
     }
 
-    if (!propIsColor) {
-      if (~to.indexOf('=')) {
-        to = currentValue + parseFloat(to.replace('=', ''));
-      }
-      else {
-        to = parseFloat(to);
-      }
+    if (~to.indexOf('=')) {
+      to = currentValue + parseFloat(to.replace('=', ''));
+    }
+    else {
+      to = parseFloat(to);
     }
 
-    var _options = {
+    fabric.util.animate({
       startValue: options.from,
       endValue: to,
       byValue: options.by,
       easing: options.easing,
       duration: options.duration,
-      abort: options.abort && function () {
+      abort: options.abort && function() {
         return options.abort.call(_this);
       },
-      onChange: function (value, valueProgress, timeProgress) {
+      onChange: function(value, valueProgress, timeProgress) {
         if (propPair) {
           _this[propPair[0]][propPair[1]] = value;
         }
@@ -214,21 +210,14 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
         }
         options.onChange && options.onChange(value, valueProgress, timeProgress);
       },
-      onComplete: function (value, valueProgress, timeProgress) {
+      onComplete: function(value, valueProgress, timeProgress) {
         if (skipCallbacks) {
           return;
         }
 
         _this.setCoords();
         options.onComplete && options.onComplete(value, valueProgress, timeProgress);
       }
-    };
-
-    if (propIsColor) {
-      fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options);
-    }
-    else {
-      fabric.util.animate(_options);
-    }
+    });
   }
 });
diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
@@ -632,14 +632,6 @@
       ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath'
     ).split(' '),
 
-    /**
-     * List of properties to consider for animating colors.
-     * @type Array
-     */
-    colorProperties: (
-      'fill stroke backgroundColor'
-    ).split(' '),
-
     /**
      * a fabricObject that, without stroke define a clipping area with their shape. filled in black
      * the clipPath object gets used when the object has rendered, and the context is placed in the center

diff --git a/test/unit/animation.js b/test/unit/animation.js
@@ -61,24 +61,6 @@
     }, 1000);
   });
 
-  QUnit.test('animate with color', function(assert) {
-    var done = assert.async(), properties = fabric.Object.prototype.colorProperties,
-        object = new fabric.Object();
-
-    properties.forEach(function (prop, index) {
-      object.set(prop, 'red');
-      object.animate(prop, 'blue');
-      assert.ok(true, 'animate without options does not crash');
-
-      setTimeout(function () {
-        assert.equal(object[prop], new fabric.Color('blue').toRgba(), 'property [' + prop + '] has been animated');
-        if (index === properties.length - 1) {
-          done();
-        }
-      }, 1000);
-    });
-  });
-
   QUnit.test('animate with decrement', function(assert) {
     var done = assert.async();
     var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });