diff --git a/src/mixins/animation.mixin.js b/src/mixins/animation.mixin.js index c489a9e49..e95287a30 100644 --- a/src/mixins/animation.mixin.js +++ b/src/mixins/animation.mixin.js @@ -201,7 +201,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot abort: options.abort && function() { return options.abort.call(_this); }, - onChange: function(value) { + onChange: function(value, valueProgress, timeProgress) { if (propPair) { _this[propPair[0]][propPair[1]] = value; } @@ -211,15 +211,15 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot if (skipCallbacks) { return; } - options.onChange && options.onChange(); + options.onChange && options.onChange(value, valueProgress, timeProgress); }, - onComplete: function() { + onComplete: function(value, valueProgress, timeProgress) { if (skipCallbacks) { return; } _this.setCoords(); - options.onComplete && options.onComplete(); + options.onComplete && options.onComplete(value, valueProgress, timeProgress); } }); } diff --git a/src/util/animate.js b/src/util/animate.js index 7d2c0d16f..e13fc8ae9 100644 --- a/src/util/animate.js +++ b/src/util/animate.js @@ -1,5 +1,9 @@ (function() { + function noop() { + return false; + } + /** * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. * @memberOf fabric.util @@ -20,8 +24,9 @@ var start = timestamp || +new Date(), duration = options.duration || 500, finish = start + duration, time, - onChange = options.onChange || function() { }, - abort = options.abort || function() { return false; }, + onChange = options.onChange || noop, + abort = options.abort || noop, + onComplete = options.onComplete || noop, easing = options.easing || function(t, b, c, d) {return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;}, startValue = 'startValue' in options ? options.startValue : 0, endValue = 'endValue' in options ? options.endValue : 100, @@ -30,13 +35,16 @@ options.onStart && options.onStart(); (function tick(ticktime) { - time = ticktime || +new Date(); - var currentTime = time > finish ? duration : (time - start); if (abort()) { - options.onComplete && options.onComplete(); + onComplete(endValue, 1, 1); return; } - onChange(easing(currentTime, startValue, byValue, duration)); + time = ticktime || +new Date(); + var currentTime = time > finish ? duration : (time - start), + timePerc = currentTime / duration, + current = easing(currentTime, startValue, byValue, duration), + valuePerc = Math.abs((current - startValue) / byValue); + onChange(current, valuePerc, timePerc); if (time > finish) { options.onComplete && options.onComplete(); return;