Merge pull request #68 from alancutter/pushNewRelease

Publish version 2.2.0

Author: dstoc

Gruntfile.js

@@ -116,31 +116,33 @@ module.exports = function(grunt) {
     WEB_ANIMATIONS_TESTING: false
   };
 
-  function buildWebAnimations1(target) {
+  function build(target) {
     var config = targetConfig[target];
-    return genTarget(target).concat([
-      concat(config.scopeSrc.concat(config.sharedSrc).concat(config.webAnimations1Src), 'inter-raw-' + target + '.js', concatDefines),
-      guard('inter-raw-' + target + '.js', 'inter-' + target + '.js'),
-      compress('inter-' + target + '.js', target + '.min.js', concatDefines)
-    ]);
-  }
-
-  function buildWebAnimationsNext(target) {
-    var config = targetConfig[target];
-    return genTarget(target).concat([
+    var steps = [
       concat(config.scopeSrc.concat(config.sharedSrc), 'inter-' + target + '-preamble.js', concatDefines),
-      concat(config.webAnimations1Src, 'inter-component-' + target + 'web-animations-1.js', concatDefines),
-      guard('inter-component-' + target + 'web-animations-1.js', 'inter-guarded-' + target + '-web-animations-1.js'),
-      concat(config.webAnimationsNextSrc, 'inter-component-' + target + '.js', concatDefines),
-      concatWithMaps(['inter-' + target + '-preamble.js', 'inter-guarded-' + target + '-web-animations-1.js', 'inter-component-' + target + '.js'],
-          'inter-' + target + '.js'),
+      concat(config.webAnimations1Src, 'inter-component-' + target + '-web-animations-1.js', concatDefines),
+      guard('inter-component-' + target + '-web-animations-1.js', 'inter-guarded-' + target + '-web-animations-1.js'),
+      concat(config.webAnimations1BonusSrc, 'inter-bonus-' + target + '.js', concatDefines),
+    ];
+    var filenames = [
+      'inter-' + target + '-preamble.js',
+      'inter-guarded-' + target + '-web-animations-1.js',
+      'inter-bonus-' + target + '.js',
+    ];
+    if (config.webAnimationsNextSrc.length > 0) {
+      steps.push(concat(config.webAnimationsNextSrc, 'inter-component-' + target + '.js', concatDefines));
+      filenames.push('inter-component-' + target + '.js');
+    }
+    steps.push(
+      concatWithMaps(filenames, 'inter-' + target + '.js'),
       compress('inter-' + target + '.js', target + '.min.js', concatDefines)
-    ]);
+    );
+    return genTarget(target).concat(steps);
   }
 
-  grunt.registerTask('web-animations', buildWebAnimations1('web-animations'));
-  grunt.registerTask('web-animations-next', buildWebAnimationsNext('web-animations-next'));
-  grunt.registerTask('web-animations-next-lite', buildWebAnimationsNext('web-animations-next-lite'));
+  grunt.registerTask('web-animations', build('web-animations'));
+  grunt.registerTask('web-animations-next', build('web-animations-next'));
+  grunt.registerTask('web-animations-next-lite', build('web-animations-next-lite'));
 
   var testTargets = {'web-animations': {}, 'web-animations-next': {}};
 

History.md

@@ -1,3 +1,31 @@
+### 2.2.0 - *April 6 2016*
+  * Deprecated the use of hyphens in property names.
+
+    For example, this is deprecated:
+
+      element.animate([{'font-size': '0px'}, {'font-size': '10px'}]);
+
+    and this should be used instead:
+
+      element.animate([{fontSize: '0px'}, {fontSize: '10px'}]);
+
+  * Added arbitrary easing capitalisation.
+  * Added "id" effect option. (http://w3c.github.io/web-animations/#dom-keyframeanimationoptions-id)
+  * Added "oncancel" event handler.
+  * Added value list keyframe syntax.
+
+    As as alternative to:
+
+      element.animate([{color: 'red'}, {color: 'green'}, {color: 'blue'}]);
+
+    you can now use:
+
+      element.animate({color: ['red', 'green', 'blue']});
+
+  * Fixed easing TypeError in FireFox Nightly when using groups.
+  * Fixed delayed animation updates on Safari and Firefox
+  * Fixed infinite recursion when setting onfinish to null.
+
 ### 2.1.4 - *December 1 2015*
   * Use `Date.now()` instead of `performace.now()` for mobile Safari.
 

README.md

@@ -54,7 +54,7 @@ effect.
 
 Web Animations supports off-main-thread animations, and also allows procedural
 generation of animations and fine-grained control of animation playback. See
-<http://web-animations.github.io> for ideas and inspiration!
+<http://web-animations.github.io> for ideas and inspiration - or [web-animations-codelabs](https://github.com/web-animations/web-animations-codelabs).
 
 Native Fallback
 ---------------

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/web-animations/web-animations-js.git"
   },
-  "version": "2.1.4",
+  "version": "2.2.0",
   "keywords": [
     "animations",
     "polyfill"

src/animation.js

@@ -31,13 +31,17 @@
   };
 
   scope.Animation = function(effect) {
+    this.id = '';
+    if (effect && effect._id) {
+      this.id = effect._id;
+    }
     this._sequenceNumber = shared.sequenceNumber++;
     this._currentTime = 0;
     this._startTime = null;
     this._paused = false;
     this._playbackRate = 1;
     this._inTimeline = true;
-    this._finishedFlag = false;
+    this._finishedFlag = true;
     this.onfinish = null;
     this._finishHandlers = [];
     this._effect = effect;
@@ -139,12 +143,11 @@
       if (this._isFinished || this._idle) {
         this._currentTime = this._playbackRate > 0 ? 0 : this._totalDuration;
         this._startTime = null;
-        scope.invalidateEffects();
       }
       this._finishedFlag = false;
-      scope.restart();
       this._idle = false;
       this._ensureAlive();
+      scope.invalidateEffects();
     },
     pause: function() {
       if (!this._isFinished && !this._paused && !this._idle) {
@@ -159,22 +162,20 @@
       this.currentTime = this._playbackRate > 0 ? this._totalDuration : 0;
       this._startTime = this._totalDuration - this.currentTime;
       this._currentTimePending = false;
+      scope.invalidateEffects();
     },
     cancel: function() {
       if (!this._inEffect)
         return;
       this._inEffect = false;
       this._idle = true;
+      this._finishedFlag = true;
       this.currentTime = 0;
       this._startTime = null;
       this._effect._update(null);
       // effects are invalid after cancellation as the animation state
       // needs to un-apply.
       scope.invalidateEffects();
-      // in the absence of effect revalidation via getComputedStyle, we
-      // need a single tick to remove the effect of the cancelled
-      // animation.
-      scope.restart();
     },
     reverse: function() {
       this.playbackRate *= -1;
@@ -192,29 +193,39 @@
         this._finishHandlers.splice(index, 1);
     },
     _fireEvents: function(baseTime) {
-      var finished = this._isFinished;
-      if ((finished || this._idle) && !this._finishedFlag) {
-        var event = new AnimationEvent(this, this._currentTime, baseTime);
-        var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []);
-        setTimeout(function() {
-          handlers.forEach(function(handler) {
-            handler.call(event.target, event);
-          });
-        }, 0);
+      if (this._isFinished) {
+        if (!this._finishedFlag) {
+          var event = new AnimationEvent(this, this._currentTime, baseTime);
+          var handlers = this._finishHandlers.concat(this.onfinish ? [this.onfinish] : []);
+          setTimeout(function() {
+            handlers.forEach(function(handler) {
+              handler.call(event.target, event);
+            });
+          }, 0);
+          this._finishedFlag = true;
+        }
+      } else {
+        this._finishedFlag = false;
       }
-      this._finishedFlag = finished;
     },
-    _tick: function(timelineTime) {
+    _tick: function(timelineTime, isAnimationFrame) {
       if (!this._idle && !this._paused) {
-        if (this._startTime == null)
-          this.startTime = timelineTime - this._currentTime / this.playbackRate;
-        else if (!this._isFinished)
+        if (this._startTime == null) {
+          if (isAnimationFrame) {
+            this.startTime = timelineTime - this._currentTime / this.playbackRate;
+          }
+        } else if (!this._isFinished) {
           this._tickCurrentTime((timelineTime - this._startTime) * this.playbackRate);
+        }
       }
 
-      this._currentTimePending = false;
-      this._fireEvents(timelineTime);
-      return !this._idle && (this._inEffect || !this._finishedFlag);
+      if (isAnimationFrame) {
+        this._currentTimePending = false;
+        this._fireEvents(timelineTime);
+      }
+    },
+    get _needsTick() {
+      return (this.playState in {'pending': 1, 'running': 1}) || !this._finishedFlag;
     },
   };
 

src/element-animatable.js

@@ -13,7 +13,11 @@
 // limitations under the License.
 
 (function(scope) {
-  window.Element.prototype.animate = function(effectInput, timingInput) {
-    return scope.timeline._play(scope.KeyframeEffect(this, effectInput, timingInput));
+  window.Element.prototype.animate = function(effectInput, options) {
+    var id = '';
+    if (options && options.id) {
+      id = options.id;
+    }
+    return scope.timeline._play(scope.KeyframeEffect(this, effectInput, options, id));
   };
 })(webAnimations1);

src/group-constructors.js

@@ -18,7 +18,8 @@
     return node._timing.delay + node.activeDuration + node._timing.endDelay;
   }
 
-  function constructor(children, timingInput) {
+  function constructor(children, timingInput, id) {
+    this._id = id;
     this._parent = null;
     this.children = children || [];
     this._reparent(this.children);
@@ -184,7 +185,7 @@
       }
     };
 
-    var underlyingEffect = new KeyframeEffect(null, [], group._timing);
+    var underlyingEffect = new KeyframeEffect(null, [], group._timing, group._id);
     underlyingEffect.onsample = ticker;
     underlyingAnimation = scope.timeline._play(underlyingEffect);
     return underlyingAnimation;

src/keyframe-effect-constructor.js

@@ -53,7 +53,7 @@
     this._frames = shared.normalizeKeyframes(effectInput);
   }
 
-  scope.KeyframeEffect = function(target, effectInput, timingInput) {
+  scope.KeyframeEffect = function(target, effectInput, timingInput, id) {
     this.target = target;
     this._parent = null;
 
@@ -71,6 +71,7 @@
     }
     this._keyframes = effectInput;
     this.activeDuration = shared.calculateActiveDuration(this._timing);
+    this._id = id;
     return this;
   };
 
@@ -96,7 +97,7 @@
       if (typeof this.getFrames() == 'function') {
         throw new Error('Cloning custom effects is not supported.');
       }
-      var clone = new KeyframeEffect(this.target, [], shared.cloneTimingInput(this._timingInput));
+      var clone = new KeyframeEffect(this.target, [], shared.cloneTimingInput(this._timingInput), this._id);
       clone._normalizedKeyframes = this._normalizedKeyframes;
       clone._keyframes = this._keyframes;
       return clone;
@@ -107,8 +108,12 @@
   };
 
   var originalElementAnimate = Element.prototype.animate;
-  Element.prototype.animate = function(effectInput, timing) {
-    return scope.timeline._play(new scope.KeyframeEffect(this, effectInput, timing));
+  Element.prototype.animate = function(effectInput, options) {
+    var id = '';
+    if (options && options.id) {
+      id = options.id;
+    }
+    return scope.timeline._play(new scope.KeyframeEffect(this, effectInput, options, id));
   };
 
   var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
@@ -119,13 +124,14 @@
       if (typeof keyframes == 'function') {
         keyframes = [];
       }
-      var timing = keyframeEffect._timingInput;
+      var options = keyframeEffect._timingInput;
+      options.id = keyframeEffect._id;
     } else {
       var target = nullTarget;
       var keyframes = [];
-      var timing = 0;
+      var options = 0;
     }
-    return originalElementAnimate.apply(target, [keyframes, timing]);
+    return originalElementAnimate.apply(target, [keyframes, options]);
   };
 
   // TODO: Remove this once we remove support for custom KeyframeEffects.

src/keyframe-effect.js

@@ -28,7 +28,7 @@
     return effectTime;
   }
 
-  scope.KeyframeEffect = function(target, effectInput, timingInput) {
+  scope.KeyframeEffect = function(target, effectInput, timingInput, id) {
     var effectTime = EffectTime(shared.normalizeTimingInput(timingInput));
     var interpolations = scope.convertEffectInput(effectInput);
     var timeFraction;
@@ -49,6 +49,7 @@
     };
     keyframeEffect._isCurrent = effectTime._isCurrent;
     keyframeEffect._totalDuration = effectTime._totalDuration;
+    keyframeEffect._id = id;
     return keyframeEffect;
   };
 

src/keyframe-interpolations.js

@@ -73,12 +73,13 @@
   function makeInterpolations(propertySpecificKeyframeGroups) {
     var interpolations = [];
     for (var groupName in propertySpecificKeyframeGroups) {
-      var group = propertySpecificKeyframeGroups[groupName];
-      for (var i = 0; i < group.length - 1; i++) {
-        var startTime = group[i].offset;
-        var endTime = group[i + 1].offset;
-        var startValue = group[i].value;
-        var endValue = group[i + 1].value;
+      var keyframes = propertySpecificKeyframeGroups[groupName];
+      for (var i = 0; i < keyframes.length - 1; i++) {
+        var startTime = keyframes[i].offset;
+        var endTime = keyframes[i + 1].offset;
+        var startValue = keyframes[i].value;
+        var endValue = keyframes[i + 1].value;
+        var easing = keyframes[i].easing;
         if (startTime == endTime) {
           if (endTime == 1) {
             startValue = endValue;
@@ -89,7 +90,7 @@
         interpolations.push({
           startTime: startTime,
           endTime: endTime,
-          easing: group[i].easing,
+          easing: shared.toTimingFunction(easing ? easing : 'linear'),
           property: groupName,
           interpolation: scope.propertyInterpolation(groupName, startValue, endValue)
         });