README
rafps
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
Install
$ npm install --save rafps
Usage
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();
API
rafps(draw, fps?)
Returns: RAFPS
Returns a new RAFPS
instance which can toggle between play/pause states using the same draw
and fps
values.
draw
Type: Function
Required: true
The callback function you want invoked 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
once again.
fps
Type: Number
Default: 60
The number of frames per second* to shoot for.
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 framerate will be at the mercy of yourdraw
callback.
You should aim for lightweight operations that complete within1ms
.
rafps.play()
Returns: void
Begin playback.
Your draw
function will begin invocations, receiving a new frame
(number) parameter. See draw
for info.
rafps.pause()
Returns: void
Pause playback.
License
MIT © Luke Edwards