https://github.com/lukeed/rafps

A tiny (178B) helper for playing, pausing, and setting `requestAnimationFrame` frame rates
https://github.com/lukeed/rafps

Last synced: about 2 months ago
JSON representation

A tiny (178B) helper for playing, pausing, and setting `requestAnimationFrame` frame rates

• Host: GitHub
• URL: https://github.com/lukeed/rafps
• Owner: lukeed
• License: mit
• Created: 2020-01-31T00:28:10.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-02-03T23:08:28.000Z (over 4 years ago)
• Last Synced: 2024-07-03T15:13:47.191Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 82
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

• awesome-list - rafps

README

        
# rafps [![codecov](https://badgen.now.sh/codecov/c/github/lukeed/rafps)](https://codecov.io/gh/lukeed/rafps)

> A tiny (178B) helper for playing, pausing, and setting [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) frame rates.

This module is delivered as:

* **ES Module**: [`dist/rafps.mjs`](https://unpkg.com/rafps/dist/index.mjs)

* **CommonJS**: [`dist/rafps.js`](https://unpkg.com/rafps/dist/index.js)

* **UMD**: [`dist/rafps.min.js`](https://unpkg.com/rafps)

## Install

```

$ npm install --save rafps

```

## Usage

```js

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 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.

#### fps

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 your `draw` callback. 
You should aim for lightweight operations that complete within `1ms`.

### rafps.play()

Returns: `void`

Begin playback.


Your `draw` function will begin invocations, receiving a new `frame` (number) parameter. See [`draw`](#draw) for info.

### rafps.pause()

Returns: `void`

Pause playback.

## License

MIT © [Luke Edwards](https://lukeed.com)