42 lines
1.2 KiB
Markdown
42 lines
1.2 KiB
Markdown
---
|
|
title: recordAnimationFrames
|
|
tags: browser,utility,intermediate
|
|
---
|
|
|
|
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.
|
|
|
|
```js
|
|
const recordAnimationFrames = (callback, autoStart = true) => {
|
|
let running = true,
|
|
raf;
|
|
const stop = () => {
|
|
running = false;
|
|
cancelAnimationFrame(raf);
|
|
};
|
|
const start = () => {
|
|
running = true;
|
|
run();
|
|
};
|
|
const run = () => {
|
|
raf = requestAnimationFrame(() => {
|
|
callback();
|
|
if (running) run();
|
|
});
|
|
};
|
|
if (autoStart) start();
|
|
return { start, stop };
|
|
};
|
|
```
|
|
|
|
```js
|
|
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
|
|
``` |