Menu

gitpiper

recordAnimationFrames javascript Code Snippet in 2023

browserrecursionintermediate

Last Updated: 11 September 2023

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 September 2023

Subscribe to our Newsletter

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

© 2023 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! ✌️