/raf

:movie_camera: RequestAnimationFrame utilities

Primary LanguageJavaScriptMIT LicenseMIT

Raf

📚 Documentation | 🎉 Example | 🌐 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


Installation

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

# or using yarn
$ yarn add @internet/raf

API

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

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


⏳ 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)

⏰ RafTimer

RafTimer

Kind: global class

API


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