@internet/raf

RequestAnimationFrame utilities

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@internet/raf
910.2.15 years ago6 years agoMinified + gzip package size for @internet/raf in KB

Readme

Raf
:books: Documentation | :tada: Example | :globewithmeridians: Internet modules
  • RAF Singleton with high resolution delta time (if supported)
- Autostop & autostart requestAnimationFrame when adding/removing function - setBefore & setAfter methods to add function at the beginning and the end of the raf call
  • fps limiter
  • RAF-based timer Class


Requirements
  • ES6 Modules support
- Using a module bundler like Webpack, Rollup or Parcel - Native support from browser - From NodeJS

Installation
# using npm
$ npm install --save @internet/raf

# or using yarn
$ yarn add @internet/raf



API
import { raf, fpsLimiter, RafTimer } from '@internet/raf'




:moviecamera: raf

Core of the raf package
Example
import { raf } from '@internet/raf'

function tick (dt) {
 console.log('called on new frame')
}

raf.add(tick)

API

* _methods_
    * [.addBefore(fn, [prepend])](#module_raf.addBefore)
    * [.addAfter(fn, [prepend])](#module_raf.addAfter)
    * [.add(fn, [prepend])](#module_raf.add)
    * [.removeBefore(fn)](#module_raf.removeBefore)
    * [.removeAfter(fn, [prepend])](#module_raf.removeAfter)
    * [.remove(fn)](#module_raf.remove)
    * [.start([instant])](#module_raf.start)
    * [.requestOnce()](#module_raf.requestOnce)
    * [.stop()](#module_raf.stop)
    * [.dispose()](#module_raf.dispose)
* _properties_
    * [.time](#module_raf.time) : <code>number</code>
    * [.dt](#module_raf.dt) : <code>number</code>

raf.addBefore(fn, prepend)

Add a function for execution at the beginning of the raf call Calling addBefore will not start the raf.
Kind: static method of raf
Category: methods
| Param | Type | Default | Description | | --- | --- | --- | --- | | fn | function | | Function to be called at the start of the raf | | prepend | function | false | Prepend the function to the beginning of the functions list |

raf.addAfter(fn, prepend)

Add a function for execution at the end of the raf call Calling addAfter will not start the raf.
Kind: static method of raf
Category: methods
| Param | Type | Default | Description | | --- | --- | --- | --- | | fn | function | | Function to be called at the end of the raf | | prepend | function | false | Prepend the function to the beginning of the functions list |

raf.add(fn, prepend)

Add a function for execution on each frame
Kind: static method of raf
Category: methods
| Param | Type | Default | Description | | --- | --- | --- | --- | | fn | function | | Function to be called | | prepend | function | false | Prepend the function to the beginning of the functions list |

raf.removeBefore(fn)

Remove a function for execution at the beginning of the raf call Calling removeBefore will not stop the raf.
Kind: static method of raf
Category: methods
| Param | Type | Description | | --- | --- | --- | | fn | function | Function to remove from the raf |

raf.removeAfter(fn, prepend)

Remove a function for execution at the end of the raf call Calling removeAfter will not stop the raf.
Kind: static method of raf
Category: methods
| Param | Type | Default | Description | | --- | --- | --- | --- | | fn | function | | Function to remove from the raf | | prepend | function | false | Prepend the function to the beginning of the functions list |

raf.remove(fn)

Remove a function for execution on each frame
Kind: static method of raf
Category: methods
| Param | Type | Description | | --- | --- | --- | | fn | function | Function to remove from the raf |

raf.start(instant)

Force start the raf. You usually don't need to use it.
Kind: static method of raf
Category: methods
| Param | Type | Default | Description | | --- | --- | --- | --- | | instant | boolean | false | Directly make a raf call without waiting for the next frame (default false) |

raf.requestOnce()

Request once the raf. Will not be executed if the raf is already running.
Kind: static method of raf
Category: methods

raf.stop()

Force stop the raf. You usually don't need to use it.
Kind: static method of raf
Category: methods

raf.dispose()

Remove all observers from the raf singleton and stop the raf if it's running. Reset time.
Kind: static method of raf
Category: methods

raf.time : number

Time elapsed between the previous and the current frame
Kind: static property of raf
Category: properties

raf.dt : number

Current delta time
Kind: static property of raf
Category: properties




:hourglassflowingsand: fpsLimiter

Limit function calls to a specific framerate
Kind: global function
Returns: function - Framerate-limited function to add to your raf
| Param | Type | Default | Description | | --- | --- | --- | --- | | framerate | number | 30 | Framerate | | callback | function | | Function to be called at the specified frame interval |
Example
import { raf, fpsLimiter } from '@internet/raf'

function tick () {
  console.log('called each 10 fps')
}

const limited = fpsLimiter(10, tick)
raf.add(limited)



:alarmclock: RafTimer

RafTimer
Kind: global class

API

* [new RafTimer(delay, cb, [autostart])](#new_RafTimer_new)
* [.setCallback(newCallback, [newDelay])](#RafTimer+setCallback)
* [.stop()](#RafTimer+stop)
* [.start()](#RafTimer+start)
* [.restart(newDelay, [useRemainder])](#RafTimer+restart)
* [.update(dt)](#RafTimer+update)
* [.dispose()](#RafTimer+dispose)

new RafTimer(delay, cb, autostart)

Create a new RafTimer instance.
| Param | Type | Default | Description | | --- | --- | --- | --- | | delay | number | | Number of milliseconds before executing the callback. | | cb | function | | Callback function executed when the timer hit 0. For convenience, a restart method will be passed as 1st arg of the cb function. | | autostart | boolean | true | Optional (default true). Auto-start the timer (Don't need to call start() method). |
Example
import { raf, RafTimer } from '@internet/raf'

const timer = new RafTimer(2000, restart => {
  console.log('Will be logged after 2000ms')
  restart() // Restart the timer. onDone will be called after another 2000ms.
})

raf.add(dt => timer.update(dt))

rafTimer.setCallback(newCallback, newDelay)

Set a new callback function.
Kind: instance method of RafTimer
| Param | Type | Description | | --- | --- | --- | | newCallback | function | New callback function. For convenience, a restart method will be passed as 1st arg of the cb function. | | newDelay | number | Optional. Set a new delay (in ms). If set, the timer will be restarted |

rafTimer.stop()

Stop the timer. update() calls will do nothing.
Kind: instance method of RafTimer

rafTimer.start()

Start the timer if stopped.
Kind: instance method of RafTimer

rafTimer.restart(newDelay, useRemainder)

Restart the timer
Kind: instance method of RafTimer
| Param | Type | Default | Description | | --- | --- | --- | --- | | newDelay | number | | | | useRemainder | boolean | true | Optional (default true). Use deltatime's remainder from the last time the timer hits 0. |

rafTimer.update(dt)

Update remaining time. Usually executed inside a requestAnimationFrame call.
Kind: instance method of RafTimer
| Param | Type | Description | | --- | --- | --- | | dt | number | Time elapsed since the last call (in ms). |

rafTimer.dispose()

Stop the timer and remove callback reference
Kind: instance method of RafTimer