Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including animation with all npm packages installed. Try it out:

var animation = require("animation")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

animation v0.1.3

animation timing & handling

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free