Merge pull request #246 from dstockwell/pass-anim

Wrap custom effect with animation in source

Author: dstoc

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);
@@ -43,6 +43,27 @@
     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 +124,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

@@ -52,4 +52,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();
   };
 
   // TODO: add a source getter/setter
   scope.Player.prototype = {
+    _rebuildUnderlyingPlayer: function() {
+      if (this._player) {
+        this._player.cancel();
+        this._player = null;
+      }
+
+      if (!this.source) {
+        return;
+      }
+
+      if (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);
+      }
+    },
     get paused() {
       return this._player.paused;
     },

src/timeline.js

@@ -14,16 +14,13 @@
 
 
 (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?
@@ -35,7 +32,13 @@
       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();
+      return player;
+    },
   };
 
   var ticking = false;

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);
+  });
 });