Merge pull request #316 from rjwright/RefactorEffectNodeRebased

Refactor effect node

Author: shans

src/effect-node.js

@@ -14,8 +14,22 @@
 
 (function(shared, scope, testing) {
 
+  function EffectTime(timing) {
+    var timeFraction = 0;
+    var activeDuration = shared.calculateActiveDuration(timing);
+    var effectTime = function(localTime) {
+      return shared.calculateTimeFraction(activeDuration, localTime, timing);
+    };
+    effectTime._totalDuration = timing.delay + activeDuration + timing.endDelay;
+    effectTime._isCurrent = function(localTime) {
+      var phase = shared.calculatePhase(activeDuration, localTime, timing);
+      return phase === PhaseActive || phase === PhaseBefore;
+    };
+    return effectTime;
+  }
+
   scope.KeyframeEffect = function(target, effectInput, timingInput) {
-    var effectNode = scope.EffectNode(shared.normalizeTimingInput(timingInput));
+    var effectTime = EffectTime(shared.normalizeTimingInput(timingInput));
     var keyframes = scope.convertEffectInput(effectInput);
     var timeFraction;
     var keyframeEffect = function() {
@@ -24,7 +38,7 @@
     };
     // Returns whether the keyframeEffect is in effect or not after the timing update.
     keyframeEffect._update = function(localTime) {
-      timeFraction = effectNode(localTime);
+      timeFraction = effectTime(localTime);
       return timeFraction !== null;
     };
     keyframeEffect._clear = function() {
@@ -33,8 +47,8 @@
     keyframeEffect._hasSameTarget = function(otherTarget) {
       return target === otherTarget;
     };
-    keyframeEffect._isCurrent = effectNode._isCurrent;
-    keyframeEffect._totalDuration = effectNode._totalDuration;
+    keyframeEffect._isCurrent = effectTime._isCurrent;
+    keyframeEffect._totalDuration = effectTime._totalDuration;
     return keyframeEffect;
   };
 
@@ -60,6 +74,7 @@
 
   if (WEB_ANIMATIONS_TESTING) {
     testing.webAnimations1KeyframeEffect = scope.KeyframeEffect;
+    testing.effectTime = EffectTime;
   }
 
 })(webAnimationsShared, webAnimations1, webAnimationsTesting);

src/keyframe-effect.js

@@ -18,7 +18,6 @@
       'src/scope.js'];
 
   var webAnimations1Src = [
-      'src/effect-node.js',
       'src/effect.js',
       'src/property-interpolation.js',
       'src/keyframe-effect.js',
@@ -44,7 +43,6 @@
   ];
 
   var liteWebAnimations1Src = [
-      'src/effect-node.js',
       'src/effect.js',
       'src/property-interpolation.js',
       'src/keyframe-effect.js',
@@ -85,13 +83,13 @@
       'test/js/box-handler.js',
       'test/js/color-handler.js',
       'test/js/dimension-handler.js',
-      'test/js/effect-node.js',
       'test/js/effect.js',
       'test/js/interpolation.js',
       'test/js/matrix-interpolation.js',
       'test/js/number-handler.js',
       'test/js/property-interpolation.js',
       'test/js/tick.js',
+      'test/js/timing-utilities.js',
       'test/js/timing.js',
       'test/js/transform-handler.js'];
 

target-config.js

@@ -1,4 +1,4 @@
-suite('effect-node', function() {
+suite('timing-utilities', function() {
   test('normalize timing input', function() {
     assert.equal(normalizeTimingInput(1).duration, 1);
     assert.equal(normalizeTimingInput(1).easing(0.2), 0.2);
@@ -90,25 +90,25 @@ suite('effect-node', function() {
     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);
   });
-  test('Effect Node', function() {
+  test('EffectTime', function() {
     var timing = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'linear', direction: 'alternate', delay: 100, fill: 'forwards'});
     var timing2 = normalizeTimingInput({duration: 1000, iterations: 4, iterationStart: 0.5, easing: 'ease', direction: 'alternate', delay: 100, fill: 'forwards'});
-    var node = webAnimations1.EffectNode(timing);
-    var node2 = webAnimations1.EffectNode(timing2);
-    assert.equal(node(0), null);
-    assert.equal(node(100), 0.5);
-    assert.closeTo(node2(100), 0.8, 0.005);
-    assert.equal(node(600), 1);
-    assert.closeTo(node2(600), 1, 0.005);
-    assert.equal(node(700), 0.9);
-    assert.closeTo(node2(700), 0.99, 0.005);
-    assert.equal(node(1600), 0);
-    assert.closeTo(node2(1600), 0, 0.005);
-    assert.equal(node(4000), 0.4);
-    assert.closeTo(node2(4000), 0.68, 0.005);
-    assert.equal(node(4100), 0.5);
-    assert.closeTo(node2(4100), 0.8, 0.005);
-    assert.equal(node(6000), 0.5);
-    assert.closeTo(node2(6000), 0.8, 0.005);
+    var effectTF = effectTime(timing);
+    var effectTF2 = effectTime(timing2);
+    assert.equal(effectTF(0), null);
+    assert.equal(effectTF(100), 0.5);
+    assert.closeTo(effectTF2(100), 0.8, 0.005);
+    assert.equal(effectTF(600), 1);
+    assert.closeTo(effectTF2(600), 1, 0.005);
+    assert.equal(effectTF(700), 0.9);
+    assert.closeTo(effectTF2(700), 0.99, 0.005);
+    assert.equal(effectTF(1600), 0);
+    assert.closeTo(effectTF2(1600), 0, 0.005);
+    assert.equal(effectTF(4000), 0.4);
+    assert.closeTo(effectTF2(4000), 0.68, 0.005);
+    assert.equal(effectTF(4100), 0.5);
+    assert.closeTo(effectTF2(4100), 0.8, 0.005);
+    assert.equal(effectTF(6000), 0.5);
+    assert.closeTo(effectTF2(6000), 0.8, 0.005);
   });
 });

test/js/effect-node.js renamed to test/js/timing-utilities.js

@@ -18,7 +18,6 @@
 <script src="src/timing-utilities.js"></script>
 <script src="src/normalize-keyframes.js"></script>
 <script src="src/deprecation.js"></script>
-<script src="src/effect-node.js"></script>
 <script src="src/effect.js"></script>
 <script src="src/property-interpolation.js"></script>
 <script src="src/keyframe-effect.js"></script>

web-animations-next-lite.dev.html

@@ -18,7 +18,6 @@
 <script src="src/timing-utilities.js"></script>
 <script src="src/normalize-keyframes.js"></script>
 <script src="src/deprecation.js"></script>
-<script src="src/effect-node.js"></script>
 <script src="src/effect.js"></script>
 <script src="src/property-interpolation.js"></script>
 <script src="src/keyframe-effect.js"></script>

web-animations-next.dev.html

@@ -18,7 +18,6 @@
 <script src="src/timing-utilities.js"></script>
 <script src="src/normalize-keyframes.js"></script>
 <script src="src/deprecation.js"></script>
-<script src="src/effect-node.js"></script>
 <script src="src/effect.js"></script>
 <script src="src/property-interpolation.js"></script>
 <script src="src/keyframe-effect.js"></script>