Merge pull request #306 from rjwright/GroupPlaybackRateRebased

Fix group playback rates

Author: rjwright

src/animation.js

@@ -48,7 +48,14 @@
 
   scope.Animation.prototype = {
     _ensureAlive: function() {
-      this._inEffect = this._effect._update(this.currentTime);
+      // If an animation is playing backwards and is not fill backwards/both
+      // then it should go out of effect when it reaches the start of its
+      // active interval (currentTime == 0).
+      if (this.playbackRate < 0 && this.currentTime === 0) {
+        this._inEffect = this._effect._update(-1);
+      } else {
+        this._inEffect = this._effect._update(this.currentTime);
+      }
       if (!this._inTimeline && (this._inEffect || !this._finishedFlag)) {
         this._inTimeline = true;
         scope.timeline._animations.push(this);
@@ -98,8 +105,15 @@
       return this._playbackRate;
     },
     set playbackRate(value) {
+      if (value == this._playbackRate) {
+        return;
+      }
       var oldCurrentTime = this.currentTime;
       this._playbackRate = value;
+      this._startTime = null;
+      if (this.playState != 'paused' && this.playState != 'idle') {
+        this.play();
+      }
       if (oldCurrentTime != null) {
         this.currentTime = oldCurrentTime;
       }
@@ -153,8 +167,7 @@
       this._startTime = null;
     },
     reverse: function() {
-      this._playbackRate *= -1;
-      this._startTime = null;
+      this.playbackRate *= -1;
       this.play();
     },
     addEventListener: function(type, handler) {

src/group-constructors.js

@@ -57,16 +57,37 @@
 
   scope.newUnderlyingAnimationForGroup = function(group) {
     var underlyingAnimation;
+    var timing = null;
     var ticker = function(tf) {
       var animation = underlyingAnimation._wrapper;
-      if (animation.playState == 'pending') return;
+      if (animation.playState == 'pending')
+        return;
 
       if (!animation.effect)
         return;
+
       if (tf == null) {
         animation._removeChildren();
         return;
       }
+
+      // If the group has a negative playback rate and is not fill backwards/both, then it should go
+      // out of effect when it reaches the start of its active interval (tf == 0). If it is fill
+      // backwards/both then it should stay in effect. calculateTimeFraction will return 0 in the
+      // backwards-filling case, and null otherwise.
+      if (tf == 0 && animation.playbackRate < 0) {
+        if (!timing) {
+          timing = shared.normalizeTimingInput(animation.effect.timing);
+        }
+        tf = shared.calculateTimeFraction(shared.calculateActiveDuration(timing), -1, timing);
+        if (isNaN(tf) || tf == null) {
+          animation._forEachChild(function(child) {
+            child.currentTime = -1;
+          });
+          animation._removeChildren();
+          return;
+        }
+      }
     };
 
     underlyingAnimation = scope.timeline.play(new scope.KeyframeEffect(null, ticker, group._timing));

src/web-animations-next-animation.js

@@ -86,10 +86,10 @@
     },
     _arrangeChildren: function(childAnimation, offset) {
       if (this.startTime === null) {
-        childAnimation.currentTime = this.currentTime - offset;
+        childAnimation.currentTime = this.currentTime - offset / this.playbackRate;
         childAnimation._startTime = null;
-      } else if (childAnimation.startTime !== this.startTime + offset) {
-        childAnimation.startTime = this.startTime + offset;
+      } else if (childAnimation.startTime !== this.startTime + offset / this.playbackRate) {
+        childAnimation.startTime = this.startTime + offset / this.playbackRate;
       }
     },
     get paused() {
@@ -137,10 +137,17 @@
       return this._animation.playbackRate;
     },
     set playbackRate(value) {
+      var oldCurrentTime = this.currentTime;
       this._animation.playbackRate = value;
       this._forEachChild(function(childAnimation) {
         childAnimation.playbackRate = value;
       });
+      if (this.playState != 'paused' && this.playState != 'idle') {
+        this.play();
+      }
+      if (oldCurrentTime !== null) {
+        this.currentTime = oldCurrentTime;
+      }
     },
     get finished() {
       return this._animation.finished;
@@ -177,14 +184,14 @@
       this._removeChildren();
     },
     reverse: function() {
+      var oldCurrentTime = this.currentTime;
       this._animation.reverse();
-      scope.awaitStartTime(this);
-      this._register();
-      this._forEachChild(function(child, offset) {
-        child.reverse();
-        child.startTime = this.startTime + offset * this.playbackRate;
-        child.currentTime = this.currentTime + offset * this.playbackRate;
+      this._forEachChild(function(childAnimation) {
+        childAnimation.reverse();
       });
+      if (oldCurrentTime !== null) {
+        this.currentTime = oldCurrentTime;
+      }
     },
     addEventListener: function(type, handler) {
       var wrapped = handler;

test/js/animation.js

@@ -239,14 +239,80 @@ suite('animation', function() {
     assert.equal(a.startTime, null);
     assert.equal(a.currentTime, null);
   });
-  test('setting playbackRate does preserves the current time', function() {
-    tick(900);
+  test('setting playbackRate sets startTime to null unless the playbackRate is not changing, ' +
+      'preserves the current time', function() {
+        tick(0);
+        var a = document.body.animate([], 1000);
+        tick(1);
+        tick(11);
+        assert.equal(a.currentTime, 10);
+
+        a.playbackRate = 2;
+        assert.equal(a.playbackRate, 2);
+        assert.equal(a.currentTime, 10);
+        assert.equal(a.startTime, null);
+        tick(12);
+        assert.equal(a.currentTime, 10);
+        assert.equal(a.startTime, 7);
+        tick(22);
+        assert.equal(a.currentTime, 30);
+        assert.equal(a.startTime, 7);
+
+        a.playbackRate = -1;
+        assert.equal(a.playbackRate, -1);
+        assert.equal(a.currentTime, 30);
+        assert.equal(a.startTime, null);
+        tick(23);
+        assert.equal(a.currentTime, 30);
+        assert.equal(a.startTime, 53);
+        tick(33);
+        assert.equal(a.currentTime, 20);
+        assert.equal(a.startTime, 53);
+
+        a.playbackRate = -1;
+        assert.equal(a.playbackRate, -1);
+        assert.equal(a.currentTime, 20);
+        assert.equal(a.startTime, 53);
+        tick(43);
+        assert.equal(a.currentTime, 10);
+        assert.equal(a.startTime, 53);
+      }
+  );
+  test('setting playbackRate puts animation back into effect if it is not finished', function() {
+    tick(0);
+    var a = document.body.animate([], 1000);
+    assert.equal(a.playbackRate, 1);
+    tick(1);
+    tick(1002);
+    assert.equal(a.currentTime, 1000);
+
+    a.playbackRate = -1;
+    assert.equal(a.playbackRate, -1);
+    assert.equal(a.currentTime, 1000);
+    tick(1003);
+    assert.equal(a.currentTime, 1000);
+    tick(1503);
+    assert.equal(a.currentTime, 500);
+  });
+  test('setting playbackRate does not put animation back into effect if it is finished', function() {
+    tick(0);
     var a = document.body.animate([], 1000);
-    tick(1100);
-    var oldCurrentTime = a.currentTime;
-    a.playbackRate = 2;
-    assert.equal(a.playbackRate, 2);
-    assert.equal(a.currentTime, oldCurrentTime);
+    assert.equal(a.playbackRate, 1);
+    tick(1);
+    tick(1002);
+    assert.equal(a.currentTime, 1000);
+    assert.equal(a.startTime, 1);
+
+    a.playbackRate = 0.5;
+    assert.equal(a.playbackRate, 0.5);
+    assert.equal(a.currentTime, 1000);
+    assert.equal(a.startTime, null);
+    tick(1003);
+    assert.equal(a.currentTime, 1000);
+    assert.equal(a.startTime, -997);
+    tick(1503);
+    assert.equal(a.currentTime, 1000);
+    assert.equal(a.startTime, -997);
   });
   test('finishing works as expected', function() {
     tick(1000);