A simple ticker using requestAnimationFrame
.
yarn add @smoovy/ticker
or
npm install --save @smoovy/ticker
Import the ticker as usual:
import { Ticker } from '@smoovy/ticker';
const ticker = new Ticker();
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.
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);
See the LICENSE file for license rights and limitations (MIT).