diff --git a/js/animation/animation.js b/js/animation/animation.js index 712521b486..a95612b192 100644 --- a/js/animation/animation.js +++ b/js/animation/animation.js @@ -85,6 +85,8 @@ duration: 500, delay: 0, repeat: -1, + reverse: false, + autoReverse: false, step: function(percent) {}, @@ -116,7 +118,7 @@ return true; }, function(droppedFrames, finishedAnimation) { console.log('Finished anim:', droppedFrames, finishedAnimation); - }, this.duration, tf, this.delay); + }, this.duration, tf, this.delay, this.reverse, this.repeat); }, /** @@ -133,12 +135,14 @@ * Signature of the method should be `function(percent) { return modifiedValue; }` * @return {Integer} Identifier of animation. Can be used to stop it any time. */ - _run: function(stepCallback, verifyCallback, completedCallback, duration, easingMethod, delay) { + _run: function(stepCallback, verifyCallback, completedCallback, duration, easingMethod, delay, isReverse, repeat) { var start = time(); var lastFrame = start; var startTime = start + delay; - var percent = 0; + var startPercent = isReverse === true ? 1 : 0; + var endPercent = isReverse === true ? 0 : 1; + var percent = startPercent; var dropCounter = 0; var id = counter++; @@ -186,16 +190,23 @@ // Compute percent value if (diff > delay && duration) { percent = (diff - delay) / duration; - if (percent > 1) { - percent = 1; + if(isReverse === true) { + percent = 1 - percent; + if (percent < 0) { + percent = 0; + } + } else { + if (percent > 1) { + percent = 1; + } } } // Execute step callback, then... var value = easingMethod ? easingMethod(percent) : percent; - if ((stepCallback(value, now, render) === false || percent === 1) && render) { + if ((stepCallback(value, now, render) === false || percent === endPercent) && render) { running[id] = null; - completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), id, percent === 1 || duration == null); + completedCallback && completedCallback(desiredFrames - (dropCounter / ((now - start) / millisecondsPerSecond)), id, percent === endPercent || duration == null); } else if (render) { lastFrame = now; ionic.requestAnimationFrame(step); diff --git a/test/html/animation.html b/test/html/animation.html index 20e622ac5f..03926114d0 100644 --- a/test/html/animation.html +++ b/test/html/animation.html @@ -36,14 +36,22 @@ Repeat +
+
+
+ +
@@ -63,8 +71,9 @@ ]; $scope.anim = { duration: 500, - delay: 500, + delay: 0, repeat: -1, + reverse: true, autoReverse: false } var el = angular.element(document.querySelector('.box'));