diff --git a/js/animation/animation.js b/js/animation/animation.js index b8a3462868..192d6abb94 100644 --- a/js/animation/animation.js +++ b/js/animation/animation.js @@ -110,7 +110,7 @@ return true; }, function(droppedFrames, finishedAnimation) { console.log('Finished anim:', droppedFrames, finishedAnimation); - }, this.duration, tf); + }, this.duration, tf, this.delay); }, /** @@ -127,10 +127,11 @@ * 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) { + _run: function(stepCallback, verifyCallback, completedCallback, duration, easingMethod, delay) { var start = time(); var lastFrame = start; + var startTime = start + delay; var percent = 0; var dropCounter = 0; var id = counter++; @@ -152,6 +153,7 @@ // Get current time var now = time(); + var diff = now - start; // Verification is executed before next animation step if (!running[id] || (verifyCallback && !verifyCallback(id))) { @@ -162,6 +164,7 @@ } + // For the current rendering to apply let's update omitted steps in memory. // This is important to bring internal state variables up-to-date with progress in time. if (render) { @@ -175,8 +178,8 @@ } // Compute percent value - if (duration) { - percent = (now - start) / duration; + if (diff > delay && duration) { + percent = (diff - delay) / duration; if (percent > 1) { percent = 1; } diff --git a/test/html/animation.html b/test/html/animation.html index 7f5ba7acd2..2f3cd61ce8 100644 --- a/test/html/animation.html +++ b/test/html/animation.html @@ -60,7 +60,7 @@ ]; $scope.anim = { duration: 500, - delay: 0, + delay: 500, repeat: -1, autoReverse: false } @@ -70,7 +70,7 @@ el: el, name: 'fadeIn', duration: 500, - delay: 0, + delay: 500, autoReverse: false, repeat: -1, curve: fn,