perf: only fire one requestAnimationFrame event

sifrr · May 14, 2019 · c6304cb · c6304cb
1 parent 38350c1
commit c6304cb
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 32 deletions.
diff --git a/dist/sifrr.animate.js b/dist/sifrr.animate.js
diff --git a/dist/sifrr.animate.js.map b/dist/sifrr.animate.js.map
diff --git a/dist/sifrr.animate.min.js b/dist/sifrr.animate.min.js
diff --git a/dist/sifrr.animate.module.js b/dist/sifrr.animate.module.js
diff --git a/dist/sifrr.animate.module.js.map b/dist/sifrr.animate.module.js.map
diff --git a/src/animateone.js b/src/animateone.js
@@ -2,6 +2,13 @@ const Bezier = require('./bezier');
 const types = require('./types');
 const wait = require('./wait');
 const digitRgx = /(\d+\.?\d*)/;
+const frames = new Set();
+
+function runFrames(currentTime) {
+  frames.forEach(f => f(currentTime));
+  window.requestAnimationFrame(runFrames);
+}
+window.requestAnimationFrame(runFrames);
 
 function animateOne({
   target,
@@ -26,22 +33,22 @@ function animateOne({
     }
   }
   type = typeof type === 'function' ? type : new Bezier(types[type] || type);
+  const rawObj = { raw };
 
-  return wait(delay).then(() => new Promise(res => {
+  return wait(delay).then(() => new Promise(resolve => {
     let startTime = performance.now();
-    function frame(currentTime) {
+    const frame = function(currentTime) {
       const percent = (currentTime - startTime) / time, bper = type(percent >= 1 ? 1 : percent);
       const next = diffs.map((d, i) => {
-        const next = bper * d + fromNums[i];
-        return round ? Math.round(next) : next;
+        const n = bper * d + fromNums[i];
+        return round ? Math.round(n) : n;
       });
-      const val = String.raw({ raw }, ...next);
+      const val = String.raw(rawObj, ...next);
       target[prop] = Number(val) || val;
       if (onUp) onUpdate(target, prop, target[prop]);
-      if (percent >= 1) return res();
-      window.requestAnimationFrame(frame);
-    }
-    window.requestAnimationFrame(frame);
+      if (percent >= 1) resolve(frames.delete(frame));
+    };
+    frames.add(frame);
   }));
 }