animation

animation timing & handling

npm install animation
5 downloads in the last week
21 downloads in the last month

animation

Handles Animation Timing and Handling for you.

Uses requesAnimationFrame when running on browser side.

Installation

$ npm install animation

Usage

animation = new Animation({frame:'100ms'});
animation.on('tick', function (dt) { … });
animation.start();

surrender-cube uses this module to draw a rotating wireframe cube in terminal.

Animation

animation = new Animation({
    // defaults
    execution: '5ms', // allowed execution time per animation tick
    timeout:   null,  // maximum time of a animation tick interval
    toggle:    false, // if true animation pauses and resumes itself when render queue gets empty or filled
    frame:     '16ms' // time per frame
});

Creates a new Animation controller.

animation.start

animation.start();

Starts animation.

animation.stop

animation.stop();

Stops animation.

animation.pause

animation.pause();

When autotoggle is enabled the Animation pauses itself if the render queue is empty.

animation.resume

animation.resume();

When autotoggle is enabled the Animation resumes itself when the render queue gets filled again after it was emtpy.

animation.nextTick

animation.nextTick(function (dt) { … });

Given callback gets called on next animation tick when running and not paused.

Events

'start'

animation.on('start', function () { … });

Emits start event every time the animation gets started.

'stop'

animation.on('stop', function () { … });

Emits stop event every time the animation gets stopped.

'pause'

animation.on('pause', function () { … });

Emits pause event every time the animation gets paused.

'resume'

animation.on('resume', function () { … });

Emits resume event every time the animation gets resumed.

'tick'

animation.on('tick', function (dt) { … });

Emits tick event every time the animation executes a animation tick.

dt is the time since last animation tick.

Use this to do your animation stuff.

npm loves you