diff --git a/History.md b/History.md index db80353c..704ef0fe 100644 --- a/History.md +++ b/History.md @@ -1,3 +1,7 @@ +### 2.1.5 - *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.1.4 - *December 1 2015* * Use `Date.now()` instead of `performace.now()` for mobile Safari. diff --git a/package.json b/package.json index dfc39f02..2f389b06 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "type": "git", "url": "https://github.com/web-animations/web-animations-js.git" }, - "version": "2.1.4", + "version": "2.1.5", "keywords": [ "animations", "polyfill" diff --git a/src/keyframe-interpolations.js b/src/keyframe-interpolations.js index cdd6fc2b..5777e7b5 100644 --- 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 index dbab8bf8..b3e1e12a 100644 --- a/src/normalize-keyframes.js +++ b/src/normalize-keyframes.js @@ -188,8 +188,6 @@ name: 'NotSupportedError', message: 'add compositing is not supported' }; - } else if (member == 'easing') { - memberValue = shared.toTimingFunction(memberValue); } else { memberValue = '' + memberValue; } @@ -197,8 +195,6 @@ } 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 index f2f89614..cbe8fffc 100644 --- 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; } @@ -296,7 +296,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 index d46b154d..965a685c 100644 --- 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() { @@ -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() { diff --git a/test/js/timing-utilities.js b/test/js/timing-utilities.js index 075d953c..707d8d1b 100644 --- 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() { @@ -88,13 +88,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'});