From 7b7b235a4032ea0be8bef5007419cbfc4b9962db Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 12 Mar 2020 10:28:25 +0100 Subject: [PATCH] Revert "feat(animation): Extend fabric.util.animate animating colors and other properties (#6191)" This reverts commit 3da5b7facad8b45ea24c9ef3c49fde7901638ebd. --- src/mixins/animation.mixin.js | 31 ++++++++++--------------------- src/shapes/object.class.js | 8 -------- test/unit/animation.js | 18 ------------------ 3 files changed, 10 insertions(+), 47 deletions(-) diff --git a/src/mixins/animation.mixin.js b/src/mixins/animation.mixin.js index 34ece2d0a7d..031933c25fe 100644 --- 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,7 +210,7 @@ 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; } @@ -222,13 +218,6 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot _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 index c1618f243a8..eee6439c128 100644 --- 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 index 108a7471dfb..b459c2207c9 100644 --- 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 });