0.1.5 • Published 5 years ago

jw-animator v0.1.5

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

jw-animator

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

NPM version build status node version npm download

Demo

Install

NPM

Methods

MethodParametersDescription
setFPSfps: integerset a specific frame rate for the animation.
setPauseOnHiddenhidden: booleanset whether the animations to be paused when the page loses focus.
setResumeOnShownshown: booleanset whether the animations to be resume when the page regains focus.
startstart the animation loop.
pausepause the animation loop.
resumeresume the animation loop.
stopstop the animation loop.
addhandler: functionbind an event handler to the animate event. A time difference will be passed as a parameter (in seconds).Returns a method to unbind.
onStarthandler: functionbind an event handler to the start event.Returns a method to unbind.
onPausehandler: functionbind an event handler to the pause event.Returns a method to unbind.
onResumehandler: functionbind an event handler to the resume event.Returns a method to unbind.
onStophandler: functionbind 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();