# rafps

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

Latest version **1.0.0** (published 2020-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install rafps
pnpm add rafps
yarn add rafps
bun add rafps
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-02-03 |
| First published | 2020-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 6 |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 82 |
| Author | Luke Edwards |
| Maintainers | lukeed |
| Keywords | fps, frame rate, cancelAnimationFrame, requestAnimationFrame, raf |

## Links

- npm: https://www.npmjs.com/package/rafps
- Repository: https://github.com/lukeed/rafps
- Homepage: https://github.com/lukeed/rafps#readme
- Issues: https://github.com/lukeed/rafps/issues
- npm.io page: https://npm.io/package/rafps

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-02-03
- 0.0.0 — 2020-01-31

## 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`<br>
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.<br>The `frame` count starts at `0` and will increment indefinitely until paused. Once paused, `frame` will start from `0` once again.

#### fps
Type: `Number`<br>
Default: `60`

The number of _frames per second_<sup>*</sup> to shoot for.<br>
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!<br>Also, your true framerate will be at the mercy of your `draw` callback. <br>You should aim for lightweight operations that complete within `1ms`.


### rafps.play()
Returns: `void`

Begin playback.<br>
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)

---
_Source: https://npm.io/package/rafps · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._