Record animation frames
Invokes the provided callback on each animation frame.
- Use recursion.
- Provided that
running
istrue
, continue invokingWindow.requestAnimationFrame()
which invokes the provided callback. - Return an object with two methods
start
andstop
to allow manual control of the recording. - Omit the second argument,
autoStart
, to implicitly callstart
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