@smoovy/ticker NPM

@smoovy/ticker

Size

A simple ticker using requestAnimationFrame.

Installation

yarn add @smoovy/ticker

npm install --save @smoovy/ticker

Usage

Import the ticker as usual:

import { Ticker } from '@smoovy/ticker';

Creating a ticker

const ticker = new Ticker();

Listening for the tick

Everytime you start listening for the tick, the ticker creates a new "thread", which you can control:

const thread = ticker.add(delta => {
  // Animate with delta value
});

The delta value is the time difference to the tick before in milliseconds

To introduce the last two parameters passed to the callback, here's an example on how to kill a thread after 2 seconds:

const thread = ticker.add((delta, time, kill) => {
  if (time >= 2000) {
    kill();
  }
});

You can also kill it like this:

setTimeout(() => thread.kill(), 2000);

Once the thread is marked as dead it will be removed on the next animation frame. After that, the reference will be removed.

Overriding the tick automation

If you want to execute the tick function manually, you can enable the override flag. This prevents the internal ticking, after at least one thread is available:

ticker.override = true;

You can then call the tick method manually:

function tick(time) {
  ticker.tick(
    1    /** A static delta value */,
    time /** Optional time value */
  );

  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);