third_party/web-animations-js/sources/src/animation-constructor.js

   1 // Copyright 2014 Google Inc. All rights reserved.
   2 //
   3 // Licensed under the Apache License, Version 2.0 (the "License");
   4 // you may not use this file except in compliance with the License.
   5 //     You may obtain a copy of the License at
   6 //
   7 // http://www.apache.org/licenses/LICENSE-2.0
   8 //
   9 // Unless required by applicable law or agreed to in writing, software
  10 // distributed under the License is distributed on an "AS IS" BASIS,
  11 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12 //     See the License for the specific language governing permissions and
  13 // limitations under the License.
  14
  15 (function(shared, scope, testing) {
  16
  17   function groupChildDuration(node) {
  18     return node._timing.delay + node.activeDuration + node._timing.endDelay;
  19   };
  20
  21   function KeyframeEffect(effect) {
  22     this._frames = shared.normalizeKeyframes(effect);
  23   }
  24
  25   KeyframeEffect.prototype = {
  26     getFrames: function() { return this._frames; }
  27   };
  28
  29   scope.Animation = function(target, effect, timingInput) {
  30     this.target = target;
  31
  32     // TODO: Store a clone, not the same instance.
  33     this._timingInput = timingInput;
  34     this._timing = shared.normalizeTimingInput(timingInput);
  35
  36     // TODO: Make modifications to timing update the underlying player
  37     this.timing = shared.makeTiming(timingInput);
  38     // TODO: Make this a live object - will need to separate normalization of
  39     // keyframes into a shared module.
  40     if (typeof effect == 'function')
  41       this.effect = effect;
  42     else
  43       this.effect = new KeyframeEffect(effect);
  44     this._effect = effect;
  45     this.activeDuration = shared.calculateActiveDuration(this._timing);
  46     return this;
  47   };
  48
  49   var originalElementAnimate = Element.prototype.animate;
  50   Element.prototype.animate = function(effect, timing) {
  51     return scope.timeline.play(new scope.Animation(this, effect, timing));
  52   };
  53
  54   var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
  55   scope.newUnderlyingPlayerForAnimation = function(animation) {
  56     var target = animation.target || nullTarget;
  57     var effect = animation._effect;
  58     if (typeof effect == 'function') {
  59       effect = [];
  60     }
  61     return originalElementAnimate.apply(target, [effect, animation._timingInput]);
  62   };
  63
  64   scope.bindPlayerForAnimation = function(player) {
  65     if (player.source && typeof player.source.effect == 'function') {
  66       scope.bindPlayerForCustomEffect(player);
  67     }
  68   };
  69
  70   var pendingGroups = [];
  71   scope.awaitStartTime = function(groupPlayer) {
  72     if (groupPlayer.startTime !== null || !groupPlayer._isGroup)
  73       return;
  74     if (pendingGroups.length == 0) {
  75       requestAnimationFrame(updatePendingGroups);
  76     }
  77     pendingGroups.push(groupPlayer);
  78   };
  79   function updatePendingGroups() {
  80     var updated = false;
  81     while (pendingGroups.length) {
  82       pendingGroups.shift()._updateChildren();
  83       updated = true;
  84     }
  85     return updated;
  86   }
  87   var originalGetComputedStyle = window.getComputedStyle;
  88   Object.defineProperty(window, 'getComputedStyle', {
  89     configurable: true,
  90     enumerable: true,
  91     value: function() {
  92       var result = originalGetComputedStyle.apply(this, arguments);
  93       if (updatePendingGroups())
  94         result = originalGetComputedStyle.apply(this, arguments);
  95       return result;
  96     },
  97   });
  98
  99   // TODO: Call into this less frequently.
 100   scope.Player.prototype._updateChildren = function() {
 101     if (this.paused || !this.source || !this._isGroup)
 102       return;
 103     var offset = this.source._timing.delay;
 104     for (var i = 0; i < this.source.children.length; i++) {
 105       var child = this.source.children[i];
 106       var childPlayer;
 107
 108       if (i >= this._childPlayers.length) {
 109         childPlayer = window.document.timeline.play(child);
 110         this._childPlayers.push(childPlayer);
 111       } else {
 112         childPlayer = this._childPlayers[i];
 113       }
 114       child.player = this.source.player;
 115
 116       if (childPlayer.startTime != this.startTime + offset) {
 117         if (this.startTime === null) {
 118           childPlayer.currentTime = this.source.player.currentTime - offset;
 119           childPlayer._startTime = null;
 120         } else {
 121           childPlayer.startTime = this.startTime + offset;
 122         }
 123         childPlayer._updateChildren();
 124       }
 125
 126       if (this.playbackRate == -1 && this.currentTime < offset && childPlayer.currentTime !== -1) {
 127         childPlayer.currentTime = -1;
 128       }
 129
 130       if (this.source instanceof window.AnimationSequence)
 131         offset += groupChildDuration(child);
 132     }
 133   };
 134
 135   window.Animation = scope.Animation;
 136   window.Element.prototype.getAnimationPlayers = function() {
 137     return document.timeline.getAnimationPlayers().filter(function(player) {
 138       return player.source !== null && player.source.target == this;
 139     }.bind(this));
 140   };
 141
 142   scope.groupChildDuration = groupChildDuration;
 143
 144 }(webAnimationsShared, webAnimationsNext, webAnimationsTesting));