1 | # raf
|
---|
2 |
|
---|
3 | [![Browser Support](http://ci.testling.com/chrisdickinson/raf.png)](http://ci.testling.com/chrisdickinson/raf)
|
---|
4 |
|
---|
5 | requestAnimationFrame polyfill for node and the browser.
|
---|
6 |
|
---|
7 | ```js
|
---|
8 | var raf = require('raf')
|
---|
9 |
|
---|
10 | raf(function tick() {
|
---|
11 | // Animation logic
|
---|
12 | raf(tick)
|
---|
13 | })
|
---|
14 | ```
|
---|
15 |
|
---|
16 | **Note:** The stream/event emitter logic found in versions prior to 1.0.0 can be found in [raf-stream](https://www.npmjs.org/package/raf-stream).
|
---|
17 |
|
---|
18 | ## Getting started
|
---|
19 |
|
---|
20 | ### CommonJS (Node, Browserify, Webpack, etc.)
|
---|
21 |
|
---|
22 | Install `raf` from npm:
|
---|
23 |
|
---|
24 | ```bash
|
---|
25 | npm install --save raf
|
---|
26 | ```
|
---|
27 |
|
---|
28 | Require it like you would any other module:
|
---|
29 |
|
---|
30 | ```js
|
---|
31 | const raf = require('raf')
|
---|
32 | ```
|
---|
33 |
|
---|
34 | ### AMD (require.js, etc)
|
---|
35 |
|
---|
36 | Download the UMD-bundle from [wzrd.in](https://wzrd.in/standalone/raf@latest) (remember to include the current version number in the filename).
|
---|
37 |
|
---|
38 | Add it to your AMD module loader config and require it like you would any other module:
|
---|
39 |
|
---|
40 | ```html
|
---|
41 | define(['raf'], raf => {...})
|
---|
42 | ```
|
---|
43 |
|
---|
44 | ### `<script>`
|
---|
45 |
|
---|
46 | Download the UMD-bundle from [wzrd.in](https://wzrd.in/standalone/raf@latest) (remember to include the current version number in the filename).
|
---|
47 |
|
---|
48 | Then include it via a script tag:
|
---|
49 |
|
---|
50 | ```html
|
---|
51 | <script src="raf-x.x.x.js"></script>
|
---|
52 | ```
|
---|
53 |
|
---|
54 | The API will be available on `window.raf`.
|
---|
55 |
|
---|
56 | ## API
|
---|
57 |
|
---|
58 | [Documentation at Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame), [W3 Specification](http://www.w3.org/TR/animation-timing/#requestAnimationFrame)
|
---|
59 |
|
---|
60 | ### var handle = raf(callback)
|
---|
61 |
|
---|
62 | `callback` is the function to invoke in the next frame. `handle` is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value.
|
---|
63 |
|
---|
64 | ### raf.cancel(handle)
|
---|
65 |
|
---|
66 | `handle` is the entry identifier returned by `raf()`. Removes the queued animation frame callback (other queued callbacks will still be invoked unless cancelled).
|
---|
67 |
|
---|
68 | ### raf.polyfill([object])
|
---|
69 |
|
---|
70 | Shorthand to polyfill `window.requestAnimationFrame` and `window.cancelAnimationFrame` if necessary (Polyfills `global` in node).
|
---|
71 |
|
---|
72 | Alternatively you can require `raf/polyfill` which will act the same as `require('raf').polyfill()`.
|
---|
73 |
|
---|
74 | If you provide `object` the polyfills are attached to that given object, instead of the inferred global.
|
---|
75 | Useful if you have an instance of a fake `window` object, and want to add `raf` and `caf` to it.
|
---|
76 |
|
---|
77 | ## Acknowledgments
|
---|
78 |
|
---|
79 | Based on work by Erik Möller, Paul Irish, and Tino Zijdel (https://gist.github.com/paulirish/1579671)
|
---|
80 |
|
---|
81 | ## License
|
---|
82 |
|
---|
83 | MIT
|
---|