Merge remote-tracking branch 'web-animations-next/master' into HEAD

Author: dstoc

README.md

@@ -35,14 +35,14 @@ effect.
     <div class="pulse" style="width:150px;">Hello world!</div>
     <script>
         var elem = document.querySelector('.pulse');
-        var player = document.timeline.play(new Animation(elem, [
+        var player = elem.animate([
             {opacity: 0.5, transform: "scale(0.5)"},
             {opacity: 1.0, transform: "scale(1)"}
         ], {
-            direction: "alternate",
+            direction: 'alternate',
             duration: 500,
             iterations: Infinity
-        }));
+        });
     </script>
 
 Web Animations supports off-main-thread animations, and also allows procedural

src/animation-constructor.js

@@ -26,7 +26,7 @@
     getFrames: function() { return this._frames; }
   };
 
-  window.Animation = function(target, effect, timingInput) {
+  scope.Animation = function(target, effect, timingInput) {
     this.target = target;
     // TODO: Make modifications to specified update the underlying player
     this._timing = shared.normalizeTimingInput(timingInput);
@@ -38,11 +38,31 @@
     else
       this.effect = new KeyframeEffect(effect);
     this._effect = effect;
-    this._internalPlayer = null;
     this.activeDuration = shared.calculateActiveDuration(this._timing);
     return this;
   };
 
+  var originalElementAnimate = Element.prototype.animate;
+  Element.prototype.animate = function(effect, timing) {
+    return scope.timeline.play(new scope.Animation(this, effect, timing));
+  };
+
+  var nullTarget = document.createElement('div');
+  scope.newUnderlyingPlayerForAnimation = function(animation) {
+    var target = animation.target || nullTarget;
+    var effect = animation._effect;
+    if (typeof effect == 'function') {
+      effect = [];
+    }
+    return originalElementAnimate.apply(target, [effect, animation.timing]);
+  };
+
+  scope.bindPlayerForAnimation = function(player) {
+    if (player.source && typeof player.source.effect == 'function') {
+      scope.bindPlayerForCustomEffect(player);
+    }
+  };
+
   var pendingGroups = [];
   scope.awaitStartTime = function(groupPlayer) {
     if (groupPlayer.startTime !== null || !groupPlayer._isGroup)
@@ -103,44 +123,10 @@
     }
   };
 
-  var nullTarget = document.createElement('div');
-
-  window.document.timeline.play = function(source) {
-    // TODO: Handle effect callback.
-    if (source instanceof window.Animation) {
-      var target = source.target ? source.target : nullTarget;
-      var player = target.animate(source._effect, source.timing);
-      player.source = source;
-      source.player = player;
-      return player;
-    }
-    // FIXME: Move this code out of this module
-    if (source instanceof window.AnimationSequence || source instanceof window.AnimationGroup) {
-      var ticker = function(tf) {
-        if (!player.source)
-          return;
-        if (tf == null) {
-          player._removePlayers();
-          return;
-        }
-        if (player.startTime === null)
-          return;
-
-        player._updateChildren();
-      };
-
-      var player = nullTarget.animate(ticker, source._timing);
-      player.source = source;
-      player._isGroup = true;
-      source.player = player;
-      scope.awaitStartTime(player);
-      return player;
-    }
-  };
-
+  window.Animation = scope.Animation;
   window.Element.prototype.getAnimationPlayers = function() {
     return document.timeline.getAnimationPlayers().filter(function(player) {
-      return player._player.source !== null && player._player.source.target == this;
+      return player.source !== null && player.source.target == this;
     }.bind(this));
   };
 

src/effect-callback.js

@@ -13,26 +13,13 @@
 // limitations under the License.
 (function(shared, scope, testing) {
 
-  var element = document.createElement('div');
-  var originalAnimate = Element.prototype.animate;
-
-  Element.prototype.animate = function(effect, timing) {
-    var player;
-    if (typeof effect == 'function') {
-      player = new scope.Player(originalAnimate.apply(element, [[], timing]));
-      bind(player, this, effect, timing);
-    } else {
-      player = new scope.Player(originalAnimate.apply(this, [effect, timing]));
-    }
-    // FIXME: See if we can just use the maxifill player source and remove this all together.
-    player._player.source = {target: this};
-    window.document.timeline._addPlayer(player);
-    return player;
-  };
+  var nullTarget = document.createElement('div');
 
   var sequenceNumber = 0;
-  function bind(player, target, effect, timing) {
-    var animation = 'fixme';
+  scope.bindPlayerForCustomEffect = function(player) {
+    var target = player.source.target;
+    var effect = player.source.effect;
+    var timing = player.source.timing;
     var last = undefined;
     timing = shared.normalizeTimingInput(timing);
     var callback = function() {
@@ -45,7 +32,7 @@
       // FIXME: There are actually more conditions under which the effect
       // should be called.
       if (t !== last)
-        effect(t, target, animation);
+        effect(t, target, player.source);
       last = t;
     };
 
@@ -54,7 +41,7 @@
     callback._sequenceNumber = sequenceNumber++;
     player._callback = callback;
     register(callback);
-  }
+  };
 
   var callbacks = [];
   var ticking = false;

src/group-constructors.js

@@ -21,7 +21,6 @@
 
     if (this._timing.duration === 'auto')
       this._timing.duration = this.activeDuration;
-    this._internalPlayer = null;
   }
 
   window.AnimationSequence = function() {
@@ -52,4 +51,31 @@
     }
   };
 
+  scope.newUnderlyingPlayerForGroup = function(group) {
+    var underlyingPlayer;
+    var ticker = function(tf) {
+      var player = underlyingPlayer._wrapper;
+      if (!player.source)
+        return;
+      if (tf == null) {
+        player._removePlayers();
+        return;
+      }
+      if (player.startTime === null)
+        return;
+
+      player._updateChildren();
+    };
+
+    underlyingPlayer = scope.timeline.play(new scope.Animation(null, ticker, group._timing));
+    return underlyingPlayer;
+  };
+
+  scope.bindPlayerForGroup = function(player) {
+    player._player._wrapper = player;
+    player._isGroup = true;
+    scope.awaitStartTime(player);
+  };
+
+
 })(webAnimationsShared, webAnimationsMaxifill, webAnimationsTesting);

src/maxifill-player.js

@@ -13,16 +13,40 @@
 // limitations under the License.
 
 (function(shared, scope, testing) {
-  scope.Player = function(player) {
-    this.source = null;
+  scope.Player = function(source) {
+    this.source = source;
+    if (source) {
+      // FIXME: detach existing player.
+      source.player = this;
+    }
     this._isGroup = false;
-    this._player = player;
+    this._player = null;
     this._childPlayers = [];
     this._callback = null;
+    this._rebuildUnderlyingPlayer();
+    // Players are constructed in the idle state.
+    this._player.cancel();
   };
 
   // TODO: add a source getter/setter
   scope.Player.prototype = {
+    _rebuildUnderlyingPlayer: function() {
+      if (this._player) {
+        this._player.cancel();
+        this._player = null;
+      }
+
+      if (!this.source || this.source instanceof window.Animation) {
+        this._player = scope.newUnderlyingPlayerForAnimation(this.source);
+        scope.bindPlayerForAnimation(this);
+      }
+      if (this.source instanceof window.AnimationSequence || this.source instanceof window.AnimationGroup) {
+        this._player = scope.newUnderlyingPlayerForGroup(this.source);
+        scope.bindPlayerForGroup(this);
+      }
+
+      // FIXME: move existing currentTime/startTime/playState to new player
+    },
     get paused() {
       return this._player.paused;
     },
@@ -94,11 +118,7 @@
     },
     cancel: function() {
       this._player.cancel();
-      if (this._callback) {
-        this._register();
-        this._callback._player = null;
-      }
-      this.source = null;
+      this._register();
       this._removePlayers();
     },
     reverse: function() {

src/player.js

@@ -71,8 +71,7 @@
       newTime = +newTime;
       if (isNaN(newTime))
         return;
-      if (scope.restart())
-        this._startTime = null;
+      scope.restart();
       if (!this.paused && this._startTime != null) {
         this._startTime = this._timeline.currentTime - newTime / this._playbackRate;
       }
@@ -116,14 +115,11 @@
       this.paused = false;
       if (this.finished || this._idle) {
         this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration;
+        this._startTime = null;
         scope.invalidateEffects();
       }
       this._finishedFlag = false;
-      if (!scope.restart()) {
-        this._startTime = this._timeline.currentTime - this._currentTime / this._playbackRate;
-      }
-      else
-        this._startTime = null;
+      scope.restart();
       this._idle = false;
       this._ensureAlive();
     },
@@ -149,6 +145,7 @@
     },
     reverse: function() {
       this._playbackRate *= -1;
+      this._startTime = null;
       this.play();
     },
     addEventListener: function(type, handler) {

src/timeline.js

@@ -14,28 +14,32 @@
 
 
 (function(shared, scope, testing) {
+
   scope.AnimationTimeline = function() {
     this._players = [];
     this.currentTime = undefined;
   };
 
   scope.AnimationTimeline.prototype = {
-    _addPlayer: function(player) {
-      this._players.push(player);
-      scope.restartMaxifillTick();
-    },
     // FIXME: This needs to return the wrapped players in maxifill
     // TODO: Does this need to be sorted?
     // TODO: Do we need to consider needsRetick?
     getAnimationPlayers: function() {
-      this.filterPlayers();
+      this._discardPlayers();
       return this._players.slice();
     },
-    filterPlayers: function() {
+    _discardPlayers: function() {
       this._players = this._players.filter(function(player) {
         return player.playState != 'finished' && player.playState != 'idle';
       });
-    }
+    },
+    play: function(source) {
+      var player = new scope.Player(source);
+      this._players.push(player);
+      scope.restartMaxifillTick();
+      player.play();
+      return player;
+    },
   };
 
   var ticking = false;
@@ -50,7 +54,7 @@
   function maxifillTick(t) {
     var timeline = window.document.timeline;
     timeline.currentTime = t;
-    timeline.filterPlayers();
+    timeline._discardPlayers();
     if (timeline._players.length == 0)
       ticking = false;
     else

test/js/animation-constructor.js

@@ -1,6 +1,8 @@
 suite('animation-constructor', function() {
   setup(function() {
-    document.timeline._players = [];
+    document.timeline.getAnimationPlayers().forEach(function(player) {
+      player.cancel();
+    });
   });
 
   test('Playing an Animation makes a Player', function() {

test/js/effect-callback.js

@@ -49,4 +49,28 @@ suite('effect-callback', function() {
     tick(501);
     assert.deepEqual(fractions, [0, 0.5, null]);
   });
+
+  test('element.animate is given animation', function() {
+    var callbackAnim;
+    var player = document.body.animate(function(t, target, a) {
+      callbackAnim = a;
+    }, 100);
+    tick(50);
+    tick(150);
+    assert.equal(isTicking(), false);
+    assert(callbackAnim, 'callback should be set');
+    assert.equal(callbackAnim.target, document.body);
+  });
+
+  test('effect callback on animation is given source animation', function() {
+    var callbackAnim;
+    var anim = new Animation(document.body, function(t, target, a) {
+      callbackAnim = a;
+    }, 1000);
+    var player = document.timeline.play(anim);
+    tick(50);
+    tick(550);
+    assert.equal(player.currentTime, 500);
+    assert.equal(callbackAnim, anim);
+  });
 });

test/js/group-constructors.js

@@ -15,7 +15,7 @@ suite('group-constructors', function() {
 
   test('player getter for children in groups, and __internalPlayer, work as expected', function() {
     var p = document.timeline.play(simpleAnimationGroup());
-    tick(100);
+    tick(0);
     assert.equal(p.source.player, p);
     assert.equal(p._childPlayers[0].source.player, p);
     assert.equal(p._childPlayers[1].source.player, p);