Raf

:books: Documentation | :tada: Example | :globe_with_meridians: 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
• window.requestAnimationFrame()

Installation

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

# or using yarn
$ yarn add @internet/raf

API

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

• :movie_camera: raf: Raf core
• :hourglass_flowing_sand: fpsLimiter: Limit function calls to a specific framerate
• :alarm_clock: RafTimer: Raf-based timer class

:movie_camera: 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

• raf : Object
  • methods
    • .addBefore(fn, [prepend])
    • .addAfter(fn, [prepend])
    • .add(fn, [prepend])
    • .removeBefore(fn)
    • .removeAfter(fn, [prepend])
    • .remove(fn)
    • .start([instant])
    • .requestOnce()
    • .stop()
    • .dispose()
  • properties
    • .time : number
    • .dt : number

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

:hourglass_flowing_sand: 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)

:alarm_clock: RafTimer

RafTimer

Kind: global class

API

• RafTimer
  • new RafTimer(delay, cb, [autostart])
  • .setCallback(newCallback, [newDelay])
  • .stop()
  • .start()
  • .restart(newDelay, [useRemainder])
  • .update(dt)
  • .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