animation

Handles Animation Timing and Handling for you.

Uses requesAnimationFrame when running on browser side.

Installation

$ npm install animation

Usage

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

// get next tick with delta time to last tick
var animation = new Animation({frame:'100ms'});
var animate = function (dt) {
 
    // do your animation stuff
 
    if (process.stdout.write(data)) {
        animation.nextTick(animate);
    } else {
        var t = new Date().getTime()
        process.stdout.once('drain', function () {
            var now = new Date().getTime();
            animate(now - t + dt);
        });
    }
};
animation.nextTick(animate); // no start required

// doesnt really matter when its executed, but it should happen
// (use this in browser if you want to update your dom on requesAnimationFrame)
var animation = new Animation();
animation.start();
animation.push(function (dt) {
    // happens (once) on the next few ticks,
    // depending on how much tasks are allready pushed
});

Δt adapters for DOM and jQuery depending on this module to do heavy DOM manipulation like insertion only on requesAnimationFrame.

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

ceilingled uses this to draw images fetched from superfeedr to draw either on SDL or on a LED wall.

Animation

animation = new Animation({
    // defaults
    timeoutexecution:'20ms', // allowed execution time per animation tick timeout
    execution: '5ms', // allowed execution time per animation tick
    timeout:   null,  // maximum time of a animation tick interval else runs continuously if null
    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 finished.

Use this to do your animation stuff.