Merge remote-tracking branch 'origin/master' into HEAD

Author: rjwright

History.md

@@ -1,3 +1,28 @@
+### 2.1.1 - *July 1 2015*
+  * Add Animation.timeline getter
+  * Add AnimationEffect.parent getter
+  * Make AnimationEffectTiming (returned by AnimationEffect.timing) attributes mutable
+  * Expose the Animation constructor
+  * Change custom effects from AnimationEffects to onsample functions. Custom effects should now be created by setting the onsample attribute of a KeyframeEffect.
+
+    For example, this is deprecated:
+
+        var myEffect = new KeyframeEffect(
+           element,
+           function(timeFraction, target, effect) {
+              target.style.opacity = timeFraction;
+           },
+           1000);
+        var myAnimation = document.timeline.play(myEffect);
+
+    and this should be used insead:
+
+        var myEffect = new KeyframeEffect(element, [], 1000);
+        effect.onsample = function(timeFraction, effect, animation) {
+           effect.target.style.opacity = timeFraction;
+        };
+        var myAnimation = document.timeline.play(myEffect);
+
 ### 2.1.0 - *June 15 2015*
   * Fix bug affecting GroupEffects with infinite iteration children
   * Add GroupEffect.firstChild and GroupEffect.lastChild

src/effect-callback.js

@@ -18,7 +18,13 @@
   var sequenceNumber = 0;
   scope.bindAnimationForCustomEffect = function(animation) {
     var target = animation.effect.target;
-    var effectFunction = animation.effect._normalizedKeyframes;
+    var effectFunction;
+    var isKeyframeEffect = typeof animation.effect.getFrames() == 'function';
+    if (isKeyframeEffect) {
+      effectFunction = animation.effect.getFrames();
+    } else {
+      effectFunction = animation.effect._onsample;
+    }
     var timing = animation.effect.timing;
     var last = null;
     timing = shared.normalizeTimingInput(timing);
@@ -31,8 +37,13 @@
       }
       // FIXME: There are actually more conditions under which the effectFunction
       // should be called.
-      if (t !== last)
-        effectFunction(t, target, animation.effect);
+      if (t !== last) {
+        if (isKeyframeEffect) {
+          effectFunction(t, target, animation.effect);
+        } else {
+          effectFunction(t, animation.effect, animation.effect._animation);
+        }
+      }
       last = t;
     };
 

src/group-constructors.js

@@ -22,9 +22,11 @@
     this._parent = null;
     this.children = children || [];
     this._reparent(this.children);
+    timingInput = shared.numericTimingToObject(timingInput);
     this._timingInput = shared.cloneTimingInput(timingInput);
     this._timing = shared.normalizeTimingInput(timingInput, true);
-    this.timing = shared.makeTiming(timingInput, true);
+    this.timing = shared.makeTiming(timingInput, true, this);
+    this.timing._effect = this;
 
     if (this._timing.duration === 'auto') {
       this._timing.duration = this.activeDuration;
@@ -92,6 +94,9 @@
     prepend: function()  {
       this._putChild(arguments, false);
     },
+    get parent() {
+      return this._parent;
+    },
     get firstChild() {
       return this.children.length ? this.children[0] : null;
     },
@@ -179,7 +184,9 @@
       }
     };
 
-    underlyingAnimation = scope.timeline._play(new scope.KeyframeEffect(null, ticker, group._timing));
+    var underlyingEffect = new KeyframeEffect(null, [], group._timing);
+    underlyingEffect.onsample = ticker;
+    underlyingAnimation = scope.timeline._play(underlyingEffect);
     return underlyingAnimation;
   };
 
@@ -193,21 +200,4 @@
 
   scope.groupChildDuration = groupChildDuration;
 
-  // Alias GroupEffect & SequenceEffect to AnimationGroup & AnimationSequence respectively, to
-  // support old constructors (Animation*) for a deprecation period. Should be removed after 23 June
-  // 2015.
-  window.AnimationSequence = function() {
-    shared.deprecated('window.AnimationSequence', '2015-03-23', 'Use window.SequenceEffect instead.');
-    window.SequenceEffect.apply(this, arguments);
-  };
-  window.AnimationSequence.prototype = Object.create(window.SequenceEffect.prototype);
-  window.AnimationSequence.prototype.constructor = window.AnimationSequence;
-
-  window.AnimationGroup = function() {
-    shared.deprecated('window.AnimationGroup', '2015-03-23', 'Use window.GroupEffect instead.');
-    window.GroupEffect.apply(this, arguments);
-  };
-  window.AnimationGroup.prototype = Object.create(window.GroupEffect.prototype);
-  window.AnimationGroup.prototype.constructor = window.AnimationGroup;
-
 })(webAnimationsShared, webAnimationsNext, webAnimationsTesting);

src/keyframe-effect-constructor.js

@@ -55,15 +55,20 @@
 
   scope.KeyframeEffect = function(target, effectInput, timingInput) {
     this.target = target;
+    this._parent = null;
 
+    timingInput = shared.numericTimingToObject(timingInput);
     this._timingInput = shared.cloneTimingInput(timingInput);
     this._timing = shared.normalizeTimingInput(timingInput);
 
-    this.timing = shared.makeTiming(timingInput);
-    if (typeof effectInput == 'function')
+    this.timing = shared.makeTiming(timingInput, false, this);
+    this.timing._effect = this;
+    if (typeof effectInput == 'function') {
+      shared.deprecated('Custom KeyframeEffect', '2015-06-22', 'Use KeyframeEffect.onsample instead.');
       this._normalizedKeyframes = effectInput;
-    else
+    } else {
       this._normalizedKeyframes = new KeyframeList(effectInput);
+    }
     this._keyframes = effectInput;
     this.activeDuration = shared.calculateActiveDuration(this._timing);
     return this;
@@ -75,9 +80,17 @@
         return this._normalizedKeyframes;
       return this._normalizedKeyframes._frames;
     },
-    get effect() {
-      shared.deprecated('KeyframeEffect.effect', '2015-03-23', 'Use KeyframeEffect.getFrames() instead.');
-      return this._normalizedKeyframes;
+    set onsample(callback) {
+      if (typeof this.getFrames() == 'function') {
+        throw new Error('Setting onsample on custom effect KeyframeEffect is not supported.');
+      }
+      this._onsample = callback;
+      if (this._animation) {
+        this._animation._rebuildUnderlyingAnimation();
+      }
+    },
+    get parent() {
+      return this._parent;
     },
     clone: function() {
       if (typeof this.getFrames() == 'function') {
@@ -115,6 +128,7 @@
     return originalElementAnimate.apply(target, [keyframes, timing]);
   };
 
+  // TODO: Remove this once we remove support for custom KeyframeEffects.
   scope.bindAnimationForKeyframeEffect = function(animation) {
     if (animation.effect && typeof animation.effect._normalizedKeyframes == 'function') {
       scope.bindAnimationForCustomEffect(animation);
@@ -159,25 +173,5 @@
       return animation.effect !== null && animation.effect.target == this;
     }.bind(this));
   };
-  window.Element.prototype.getAnimationPlayers = function() {
-    shared.deprecated('Element.getAnimationPlayers', '2015-03-23', 'Use Element.getAnimations instead.');
-    return this.getAnimations();
-  };
-
-  // Alias KeyframeEffect to Animation, to support old constructor (Animation) for a deprecation
-  // period. Should be removed after 23 June 2015.
-  //
-  // This is only on window and not on scope, because the constructor that was called
-  // webAnimationsNext.Player - now called webAnimationsNext.Animation - is already on the scope.
-  //
-  // FIXME: Add this to scope & expose the other scope.Animation (nee scope.Player). I.e. both this
-  // function and the constructor in web-animations-next-animation should be scope.Animation and
-  // window.Animation until 23 June 2015.
-  window.Animation = function() {
-    shared.deprecated('window.Animation', '2015-03-23', 'Use window.KeyframeEffect instead.');
-    window.KeyframeEffect.apply(this, arguments);
-  };
-  window.Animation.prototype = Object.create(window.KeyframeEffect.prototype);
-  window.Animation.prototype.constructor = window.Animation;
 
 }(webAnimationsShared, webAnimationsNext, webAnimationsTesting));

src/timeline.js

@@ -33,10 +33,6 @@
       this._discardAnimations();
       return this._animations.slice();
     },
-    getAnimationPlayers: function() {
-      shared.deprecated('AnimationTimeline.getAnimationPlayers', '2015-03-23', 'Use AnimationTimeline.getAnimations instead.');
-      return this.getAnimations();
-    },
     _updateAnimationsPromises: function() {
       scope.animationsWithPromises = scope.animationsWithPromises.filter(function(animation) {
         return animation._updatePromises();
@@ -49,7 +45,7 @@
       });
     },
     _play: function(effect) {
-      var animation = new scope.Animation(effect);
+      var animation = new scope.Animation(effect, this);
       this._animations.push(animation);
       scope.restartWebAnimationsNextTick();
       // Use animation._animation.play() here, NOT animation.play().

src/timing-utilities.js

@@ -28,18 +28,53 @@
     return clone;
   }
 
-  function makeTiming(timingInput, forGroup) {
-    var timing = {
-      delay: 0,
-      endDelay: 0,
-      fill: forGroup ? 'both' : 'none',
-      iterationStart: 0,
-      iterations: 1,
-      duration: forGroup ? 'auto' : 0,
-      playbackRate: 1,
-      direction: 'normal',
-      easing: 'linear',
-    };
+  function AnimationEffectTiming() {
+    this._delay = 0;
+    this._endDelay = 0;
+    this._fill = 'none';
+    this._iterationStart = 0;
+    this._iterations = 1;
+    this._duration = 0;
+    this._playbackRate = 1;
+    this._direction = 'normal';
+    this._easing = 'linear';
+  }
+
+  AnimationEffectTiming.prototype = {
+    _setMember: function(member, value) {
+      this['_' + member] = value;
+      if (this._effect) {
+        this._effect._timingInput[member] = value;
+        this._effect._timing = shared.normalizeTimingInput(shared.normalizeTimingInput(this._effect._timingInput));
+        this._effect.activeDuration = shared.calculateActiveDuration(this._effect._timing);
+        if (this._effect._animation) {
+          this._effect._animation._rebuildUnderlyingAnimation();
+        }
+      }
+    },
+    get playbackRate() {
+      return this._playbackRate;
+    },
+  };
+
+  var members = ['delay', 'endDelay', 'fill', 'iterationStart',
+    'duration', 'direction', 'easing', 'iterations'];
+  members.forEach(function(name) {
+    Object.defineProperty(
+        AnimationEffectTiming.prototype,
+        name,
+        {
+          get: function() { return this['_' + name]; },
+          set: function(value) { this._setMember(name, value); }
+        });
+  });
+
+  function makeTiming(timingInput, forGroup, effect) {
+    var timing = new AnimationEffectTiming();
+    if (forGroup) {
+      timing.fill = 'both';
+      timing.duration = 'auto';
+    }
     if (typeof timingInput == 'number' && !isNaN(timingInput)) {
       timing.duration = timingInput;
     } else if (timingInput !== undefined) {
@@ -66,9 +101,21 @@
     return timing;
   }
 
+  function numericTimingToObject(timingInput) {
+    if (typeof timingInput == 'number') {
+      if (isNaN(timingInput)) {
+        timingInput = { duration: 0 };
+      } else {
+        timingInput = { duration: timingInput };
+      }
+    }
+    return timingInput;
+  }
+
   function normalizeTimingInput(timingInput, forGroup) {
+    timingInput = shared.numericTimingToObject(timingInput);
     var timing = makeTiming(timingInput, forGroup);
-    timing.easing = toTimingFunction(timing.easing);
+    timing._easing = toTimingFunction(timing.easing);
     return timing;
   }
 
@@ -232,6 +279,7 @@
 
   shared.cloneTimingInput = cloneTimingInput;
   shared.makeTiming = makeTiming;
+  shared.numericTimingToObject = numericTimingToObject;
   shared.normalizeTimingInput = normalizeTimingInput;
   shared.calculateActiveDuration = calculateActiveDuration;
   shared.calculateTimeFraction = calculateTimeFraction;

src/web-animations-next-animation.js

@@ -15,11 +15,15 @@
 (function(shared, scope, testing) {
   scope.animationsWithPromises = [];
 
-  scope.Animation = function(effect) {
+  scope.Animation = function(effect, timeline) {
     this.effect = effect;
     if (effect) {
       effect._animation = this;
     }
+    if (!timeline) {
+      throw new Error('Animation with null timeline is not supported');
+    }
+    this._timeline = timeline;
     this._sequenceNumber = shared.sequenceNumber++;
     this._holdTime = 0;
     this._paused = false;
@@ -86,6 +90,9 @@
         this._animation = scope.newUnderlyingAnimationForGroup(this.effect);
         scope.bindAnimationForGroup(this);
       }
+      if (this.effect && this.effect._onsample) {
+        scope.bindAnimationForCustomEffect(this);
+      }
       if (hadUnderlying) {
         if (oldPlaybackRate != 1) {
           this.playbackRate = oldPlaybackRate;
@@ -148,6 +155,9 @@
         childAnimation.startTime = this.startTime + offset / this.playbackRate;
       }
     },
+    get timeline() {
+      return this._timeline;
+    },
     get playState() {
       return this._animation ? this._animation.playState : 'idle';
     },
@@ -259,16 +269,12 @@
       }
       this._updatePromises();
     },
-    get source() {
-      shared.deprecated('Animation.source', '2015-03-23', 'Use Animation.effect instead.');
-      return this.effect;
-    },
     play: function() {
       this._updatePromises();
       this._paused = false;
       this._animation.play();
-      if (document.timeline._animations.indexOf(this) == -1) {
-        document.timeline._animations.push(this);
+      if (this._timeline._animations.indexOf(this) == -1) {
+        this._timeline._animations.push(this);
       }
       this._register();
       scope.awaitStartTime(this);
@@ -356,7 +362,10 @@
     },
   };
 
+  window.Animation = scope.Animation;
+
   if (WEB_ANIMATIONS_TESTING) {
     testing.webAnimationsNextAnimation = scope.Animation;
   }
+
 })(webAnimationsShared, webAnimationsNext, webAnimationsTesting);