A tiny (178B) helper for playing, pausing, and setting
requestAnimationFrame
frame rates.
This module is delivered as:
- ES Module:
dist/rafps.mjs
- CommonJS:
dist/rafps.js
- UMD:
dist/rafps.min.js
$ npm install --save rafps
import rafps from 'rafps';
// Run at 30fps
const ctx = rafps(frame => {
console.log('Current frame:', frame);
// Do animation things...
// target hit, pause animation
// .. or can run indefinitely
if (frame >= 1e3) ctx.pause();
}, 30);
// Begin playback
ctx.play();
Returns: RAFPS
Returns a new RAFPS
instance which can toggle between play/pause states using the same draw
and fps
values.
Type: Function
Required: true
The callback function to invoke at every "frame" tick.
It will receive one argument, frame
(number), which is the current frame count since playback began.
The frame
count starts at 0
and will increment indefinitely until paused. Once paused, frame
will start from 0
the next time playback begins.
Type: Number
Default: 60
The number of frames per second* to target.
Put differently, this is the maximum number of times draw
will be called per second.
Important: This is a time-based calculation, so it's a best guess solution!
Also, your true frame rate will be at the mercy of yourdraw
callback.
You should aim for lightweight operations that complete within1ms
.
Returns: void
Begin playback.
Your draw
function will begin invocations, receiving a new frame
(number) parameter. See draw
for info.
Returns: void
Pause playback.
MIT © Luke Edwards