Menu

gitpiper

recordAnimationFrames javascript Code Snippet in 2024

browserrecursionintermediate

Last Updated: 25 March 2024

Invokes the provided callback on each animation frame.

  • Use recursion.
  • Provided that running is true, continue invoking Window.requestAnimationFrame() which invokes the provided callback.
  • Return an object with two methods start and stop to allow manual control of the recording.
  • Omit the second argument, autoStart, to implicitly call start when the function is invoked.
const recordAnimationFrames = (callback, autoStart = true) => { let running = false, raf; const stop = () => { if (!running) return; running = false; cancelAnimationFrame(raf); }; const start = () => { if (running) return; running = true; run(); }; const run = () => { raf = requestAnimationFrame(() => { callback(); if (running) run(); }); }; if (autoStart) start(); return { start, stop }; };
const cb = () => console.log('Animation frame fired'); const recorder = recordAnimationFrames(cb); // logs 'Animation frame fired' on each animation frame recorder.stop(); // stops logging recorder.start(); // starts again const recorder2 = recordAnimationFrames(cb, false); // `start` needs to be explicitly called to begin recording frames

javascript snippet similar to recordAnimationFrames For You in March 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️