diff --git a/snippets/recordAnimationFrames.md b/snippets/recordAnimationFrames.md new file mode 100644 index 000000000..100504eb9 --- /dev/null +++ b/snippets/recordAnimationFrames.md @@ -0,0 +1,38 @@ +### recordAnimationFrames + +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 +``` diff --git a/tag_database b/tag_database index a50d43b54..6207df3f1 100644 --- a/tag_database +++ b/tag_database @@ -206,6 +206,7 @@ randomIntegerInRange:math,utility,random randomNumberInRange:math,utility,random readFileLines:node,array,string rearg:adapter,function +recordAnimationFrames:browser,utility redirect:browser,url reducedFilter:array reduceSuccessive:array,function