@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

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

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

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

#### Definition

`ts
function createRAF(
callback: FrameRequestCallback,
): [running: Accessor, start: VoidFunction, stop: VoidFunction];
`

#### 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

`ts
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

`ts
function targetFPS(
callback: FrameRequestCallback,
fps: MaybeAccessor,
): FrameRequestCallback;
`

createMs

Using createRAF and targetFPS to create a signal giving the passed milliseconds since it was called with a configurable frame rate, with some added methods for more control:

- reset(): manually resetting the counter
- running(): returns if the counter is currently setRunning
- start(): restarts the counter if stopped
- stop(): stops the counter if running

It takes the framerate as single argument, either as number or Accessor. It also accepts the limit as an optional second argument, either as number or Accessor; the counter is reset if the limit is passed.

`tsx
import { createMs } from "@solid-primitives/raf";

const MovingRect() {
const ms = createMs(60);
return ;
}
`

#### Defintion

`ts
function createMs(
fps: MaybeAccessor,
limit?: MaybeAccessor,
): Accessor & {
reset: () => void;
running: () => boolean;
start: () => void;
stop: () => void;
};
``

Demo

You may view a working example here: https://codesandbox.io/s/solid-primitives-raf-demo-4xvmjd?file=/src/index.tsx

Changelog

See CHANGELOG.md