Merge pull request #423 from alancutter/easingFunction

Don't store Javascript functions on AnimationEffectTiming.easing or keyframe.easing
web-animations · Apr 5, 2016 · 3ee1ec5 · 3ee1ec5
2 parents b183b98 + 6a2f700
commit 3ee1ec5
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 22 deletions.
diff --git a/src/keyframe-interpolations.js b/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)
         });

diff --git a/src/normalize-keyframes.js b/src/normalize-keyframes.js
@@ -239,17 +239,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;
     });
 

diff --git a/src/timing-utilities.js b/src/timing-utilities.js
@@ -151,7 +151,7 @@
   function normalizeTimingInput(timingInput, forGroup) {
     timingInput = shared.numericTimingToObject(timingInput);
     var timing = makeTiming(timingInput, forGroup);
-    timing._easing = toTimingFunction(timing.easing);
+    timing._easingFunction = toTimingFunction(timing.easing);
     return timing;
   }
 
@@ -304,7 +304,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) {

diff --git a/test/js/keyframes.js b/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() {
@@ -441,6 +441,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() {

diff --git a/test/js/timing-utilities.js b/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() {
@@ -90,13 +90,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'});