Merge pull request #431 from alancutter/patchEasing2.0.0

Cherry pick easing TypeError fix onto v2.0.0

Author: suzyh

History.md

@@ -1,3 +1,8 @@
+### 2.0.1 - *April 19 2016*
+
+  * Cherry picked fix for native easing TypeError exception when using groups.
+    https://github.com/web-animations/web-animations-next/pull/423
+
 ### 2.0.0 - *April 5 2015*
 
   * Improve behavior of group Animation playback rate.

package.json

@@ -5,6 +5,7 @@
     "type": "git",
     "url": "https://github.com/web-animations/web-animations-js.git"
   },
+  "version": "2.0.1",
   "devDependencies": {
     "mocha": "1.21.4",
     "chai": "^1.9.1",

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

src/normalize-keyframes.js

@@ -188,17 +188,13 @@
             name: 'NotSupportedError',
             message: 'add compositing is not supported'
           };
-        } else if (member == 'easing') {
-          memberValue = shared.toTimingFunction(memberValue);
         } else {
           memberValue = '' + memberValue;
         }
         expandShorthandAndAntiAlias(member, memberValue, keyframe);
       }
       if (keyframe.offset == undefined)
         keyframe.offset = null;
-      if (keyframe.easing == undefined)
-        keyframe.easing = shared.toTimingFunction('linear');
       return keyframe;
     });
 

src/timing-utilities.js

@@ -57,7 +57,7 @@
 
   function normalizeTimingInput(timingInput, forGroup) {
     var timing = makeTiming(timingInput, forGroup);
-    timing.easing = toTimingFunction(timing.easing);
+    timing._easingFunction = toTimingFunction(timing.easing);
     return timing;
   }
 
@@ -199,7 +199,7 @@
     var currentDirectionIsForwards = timing.direction == 'normal' || timing.direction == (currentIterationIsOdd ? 'alternate-reverse' : 'alternate');
     var directedTime = currentDirectionIsForwards ? iterationTime : iterationDuration - iterationTime;
     var timeFraction = directedTime / iterationDuration;
-    return iterationDuration * timing.easing(timeFraction);
+    return iterationDuration * timing._easingFunction(timeFraction);
   }
 
   function calculateTimeFraction(activeDuration, localTime, timing) {

test/js/keyframes.js

@@ -158,7 +158,7 @@ suite('keyframes', function() {
         {left: '0px'}
       ]);
     });
-    assert.equal('' + normalizedKeyframes[0].easing, 'function (x) { return x; }');
+    assert.equal(normalizedKeyframes[0].easing, 'easy-peasy');
   });
 
   test('Normalize keyframes where some properties are given non-string, non-number values.', function() {
@@ -428,6 +428,18 @@ suite('keyframes', function() {
     assert.equal(interpolations[1].property, 'left');
     assert.equal(typeof interpolations[1].interpolation, 'function');
   });
+
+  test('Make interpolations with invalid easing.', function() {
+    var interpolations;
+    assert.doesNotThrow(function() {
+      interpolations = makeInterpolations(makePropertySpecificKeyframeGroups(normalizeKeyframes([
+        {left: '0px', easing: 'pants and ducks'},
+        {left: '200px'},
+      ])));
+    });
+    assert.equal(interpolations.length, 1);
+    assert.equal(interpolations[0].easing.toString(), 'function (x) { return x; }');
+  });
 });
 
 suite('keyframe-interpolations - convertEffectInput', function() {

test/js/timing-utilities.js

@@ -1,7 +1,7 @@
 suite('timing-utilities', function() {
   test('normalize timing input', function() {
     assert.equal(normalizeTimingInput(1).duration, 1);
-    assert.equal(normalizeTimingInput(1).easing(0.2), 0.2);
+    assert.equal(normalizeTimingInput(1)._easingFunction(0.2), 0.2);
     assert.equal(normalizeTimingInput(undefined).duration, 0);
   });
   test('calculating active duration', function() {
@@ -82,13 +82,13 @@ suite('timing-utilities', function() {
   });
   test('calculating transformed time', function() {
     // calculateTransformedTime(currentIteration, iterationDuration, iterationTime, timingInput);
-    assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'normal'}), 200);
-    assert.equal(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x; }, direction: 'reverse'}), 800);
-    assert.closeTo(calculateTransformedTime(4, 1000, 200, {easing: function(x) { return x * x; }, direction: 'reverse'}), 640, 0.0001);
-    assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 360, 0.0001);
-    assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate'}), 160, 0.0001);
-    assert.closeTo(calculateTransformedTime(4, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001);
-    assert.closeTo(calculateTransformedTime(3, 1000, 600, {easing: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001);
+    assert.equal(calculateTransformedTime(4, 1000, 200, {_easingFunction: function(x) { return x; }, direction: 'normal'}), 200);
+    assert.equal(calculateTransformedTime(4, 1000, 200, {_easingFunction: function(x) { return x; }, direction: 'reverse'}), 800);
+    assert.closeTo(calculateTransformedTime(4, 1000, 200, {_easingFunction: function(x) { return x * x; }, direction: 'reverse'}), 640, 0.0001);
+    assert.closeTo(calculateTransformedTime(4, 1000, 600, {_easingFunction: function(x) { return x * x; }, direction: 'alternate'}), 360, 0.0001);
+    assert.closeTo(calculateTransformedTime(3, 1000, 600, {_easingFunction: function(x) { return x * x; }, direction: 'alternate'}), 160, 0.0001);
+    assert.closeTo(calculateTransformedTime(4, 1000, 600, {_easingFunction: function(x) { return x * x; }, direction: 'alternate-reverse'}), 160, 0.0001);
+    assert.closeTo(calculateTransformedTime(3, 1000, 600, {_easingFunction: function(x) { return x * x; }, direction: 'alternate-reverse'}), 360, 0.0001);
   });
   test('EffectTime', function() {
     var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'});