@genips/raf

Installation:

npm install @genips/raf

or

yarn add @genips/raf

Specific version

npm install @genips/[email protected]

or

yarn add @genips/[email protected]

See tags for version numbers

Importing:

Add the following line to your script

import Raf from "@genips/raf";

Or add the folder to your webpack.config:

resolve: {
    modulesDirectories: ["node_modules/@sycoraxya"];
}

// And add the following line to your scripts
import Raf from "genips-raf";

Usage

genips-raf has 3 timers: Now, Timeout and Interval.

Now

Use Now to perform an action in the next animationframe.

import Raf from "@genips/raf";

Raf.now((rafInstance, elapsed) => {
    // Do stuff
});

Timeout

Use Timeout to perform an action after given MS.

The second argument can be a number or a Settings object.

import Raf from "@genips/raf";

Raf.timeout((rafInstance, elapsed) => {
    // Do stuff
}, 200);

Interval

Use Interval to perform an action after given MS and repeat it.

The second argument can be a number or a Settings object.

import Raf from "@genips/raf";

Raf.interval((rafInstance, elapsed) => {
    // Do stuff
}, 200);

Using a Settings object

If you want to specify a tickFn, use a Settings object instead of a number as the second argument

The tickFn includes the final tick

Raf.interval(
    (rafInstance, elapsed) => {
        // Do stuff after 200ms
    },
    {
        time: 200,
        tickFn: (rafInstance, elapsed) => {
            // Do stuff every tick
        },
    },
);

Types

Exported types

• RafTimeout
• RafInterval
• RafNow

You can import these types like this:

import Raf, { RafInterval } from "@genips/raf";

let interval: RafInterval;

Callback

All callbacks are called with the following arguments:

| Argument | Description | | ----------- | ------------------------------------------------------------------------------- | | rafInstance | The instance of the raf timer that's created (RafNow, RafInterval, RafTimeout) | | elapsed | (number) The amount of time in ms that has elapsed since the method started |

Settings

A Settings object can be passed as the second argument instead of a number.

Settings can contain the following properties:

| Property | Required | Description | | -------- | -------- | ---------------------------------------------------------------------------- | | time | Yes | (number) the time in MS | | tickFn | No | (Callback) A function that gets called every animationframe |

RafNow & RafTimeout

methods

| Method | Description | | ------- | ------------------------------------------------------------------ | | pause | Pauses the timer | | resume | Resumes the timer | | stop | Stops the timer | | restart | Restarts the timer with the settings that were defined at creation |

properties

| Property | Type | Description | | -------- | ------- | ------------------------------------------------------------------ | | paused | boolean | Is the instance paused | | done | boolean | Is the instance done | | progress | number | The progress of the current iteration as a percentage | | elapsed | number | How much time has elapsed since the start of the current iteration |

RafInterval

RafInterval inherits all methods and properties from RafNow and adds the following:

properties

| Property | Description | | --------- | ------------------------------------------------------- | | iteration | (number) The iteration of the interval. Starts at 1 |