como usar o recordAnimationFrames no javascript es6
January 04, 2020
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 = 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 };
};
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