@solid-primitives/raf

Reactive primitives providing support to window.requestAnimationFrame.

• createRAF - Creates an auto-disposing requestAnimationFrame loop.
• targetFPS - Used to limit the FPS of createRAF

Installation

npm install @solid-primitives/raf
# or
yarn add @solid-primitives/raf

createRAF

A primitive creating reactive window.requestAnimationFrame, that is automatically disposed onCleanup.

It takes a callback argument that will run on every frame.

Returns a signal if currently running as well as start and stop methods

import createRAF from "@solid-primitives/raf";

const [running, start, stop] = createRAF(timeStamp => console.log("Time stamp is", timeStamp));

running(); // => false
start();
running(); // => true

Definition

function createRAF(
  callback: FrameRequestCallback
): [running: Accessor<boolean>, start: Fn, stop: Fn];

Warning

To respect clients refresh rate, timeStamp should be used to calculate how much the animation should progress in a given frame, otherwise the animation will run faster on high refresh rate screens. As an example: A screen refreshing at 300fps will run the animations 5x faster than a screen with 60fps if you use other forms of time keeping that don't consider this. Please see https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

targetFPS

A primitive for wrapping window.requestAnimationFrame callback function to limit the execution of the callback to specified number of FPS.

Keep in mind that limiting FPS is achieved by not executing a callback if the frames are above defined limit. This can lead to not consistant frame duration.

The targetFPS primitive takes two arguments:

• callback - The callback to run each allowed frame
• fps - The target FPS limit

import createRAF, { targetFPS } from "@solid-primitives/raf";

const [running, start, stop] = createRAF(
  targetFPS(timeStamp => console.log("Time stamp is", timeStamp), 60)
);

// the target fps value can be a reactive sigmal
const [fps, setFps] = createSignal(60);
createRAF(targetFPS((timestamp) => {...}, fps));

Definition

function targetFPS(
  callback: FrameRequestCallback,
  fps: MaybeAccessor<number>
): FrameRequestCallback;

Demo

You may view a working example here: https://codesandbox.io/s/solid-create-raf-czd1e?file=/src/index.tsx

Changelog