jw-animator

A static and stateful instance which hooks into requestAnimationFrame. It uses setInterval if requestAnimationFrame is not available.

Demo

Install

Methods

| Method | Parameters | Description | | ------------------ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | setFPS | fps: integer | set a specific frame rate for the animation. | | setPauseOnHidden | hidden: boolean | set whether the animations to be paused when the page loses focus. | | setResumeOnShown | shown: boolean | set whether the animations to be resume when the page regains focus. | | start | | start the animation loop. | | pause | | pause the animation loop. | | resume | | resume the animation loop. | | stop | | stop the animation loop. | | add | handler: function | bind an event handler to the animate event. A time difference will be passed as a parameter (in seconds).Returns a method to unbind. | | onStart | handler: function | bind an event handler to the start event.Returns a method to unbind. | | onPause | handler: function | bind an event handler to the pause event.Returns a method to unbind. | | onResume | handler: function | bind an event handler to the resume event.Returns a method to unbind. | | onStop | handler: function | bind an event handler to the stop event.Returns a method to unbind. |

Usage

import Animator from "jw-animator";

/* Create an instance of an animator. */
let animator = new Animator();

/** Set a specific frame rate for the animation. */
animator.setFPS(fps);

/* Set the animations to be paused when the page loses focus. */
animator.setPauseOnHidden(pauseOnHidden);

/* Set the animations to be resume when the page regains focus. */
animator.setResumeOnShown(resumeOnShown);

/** Start the animation loop. */
animator.start();

/** Pause the animation loop. */
animator.pause();

/** Resume the animation loop. */
animator.resume();

/** Stop the animation loop. */
animator.stop();

/** Bind an event handler to the animate event. */
let remove = animator.add(timeDiff => { ... });

/** Unbind an event handler from the animate event. */
remove();

/** Bind an event handler to the start event. */
let removeStart = animator.onStart(() => { ... });

/** Unbind an event handler from the start event. */
removeStart();

/** Bind an event handler to the pause event. */
let removePause = animator.onPause(() => { ... });

/** Unbind an event handler from the pause event. */
removePause();

/** Bind an event handler to the resume event. */
let removeResume = animator.onResume(() => { ... });

/** Unbind an event handler from the resume event. */
removeResume();

/** Bind an event handler to the stop event. */
let removeStop = animator.onStop(() => { ... });

/** Unbind an event handler from the stop event. */
removeStop();