animitter

Animitter is an animation loop + EventEmitter for browser, node or amd.

Animitter

by Kyle Phillips

Animitter is a combination of an EventEmitter and a feature-filled animation loop. It uses requestAnimationFrame with an automatic fallback to setTimeout and offers several additional features, such as framerate throttling, providing deltaTime in milliseconds between frames, asynchronous execution of the next frame and more.

copy ./animitter.js or ./animitter.min.js into your project

<script src="js/animitter.js"></script>

or with require.js/amd:

require(['animitter'], function( animitter ){});
npm install animitter
var loop = animitter(function(frameCountdeltaTime){
    //do something 
}).start();
var loop = animitter(function(frameCountdeltaTime){
    //do something 
});
 
loop.on('start', function(frameCount){
    //loop started 
});
 
loop.on('update', function(frameCountdeltaTime){
    if( frameCount === 100 ){
        //`this` is scoped to the Animitter instance 
        this.complete();
    }
});
 
loop.on('stop', function(frameCount){
    //this will get triggered on a `complete` also 
});
 
loop.on('complete', function(frameCount){
    //done 
});
 
loop.on('reset', function(frameCount){
 
});
 
loop.start();   

Animitter uses the same EventEmitter as Node.js. This allows you to emit events, add listeners with on,once,addListener or remove listeners with removeListener or removeAllListeners.

The following example periodically emits a custom event. A listener is added for the event which removes itself after a few uses:

var timesDovesHaveFlown = 0,
    shouldMakeDovesFly = function(){ return Math.random() > 0.9; };
 
var loop = animitter(function(frameCountdeltaTime){
    //play an animation 
    if( shouldMakeDovesFly() ){
        //after the event-type, pass any parameters you want the listener to receive 
        this.emit('doves-fly', doves);
    }
});
 
var makeDovesFly = function(doves){
    timesDovesHaveFlown++;
    //make doves fly here 
    if( timesDovesHaveFlown > 4 ){
        this.removeListener('doves-fly', makeDovesFly);
    }
};
 
loop.on('doves-fly', makeDovesFly);
loop.start();
 

Animitter allows you to create a loop that will pause at each frame until explicitly invoked. It does this by passing a function as a 3rd argument:

var asyncLoop = animitter({ async: true }, function(frameCountdeltaTimenextFrame ){
    render();
    doSomethingAsync(function onComplete(){
        //now we are ready for the next frame loop 
        nextFrame();
    });
});
    
asyncLoop.start();

Throttle a requestAnimationFrame loop down to the specified frames-per-second.

var loop = animitter({ fps: 30 }, function(frameCountdeltaTime){
    //do something   
});
 
loop.start();
var loop = animitter({ async: true, fps: 30 });
loop.on('update', function(frameCountdeltaTimenextFrame){
    render();
    doSomethingAsync(function(){
        nextFrame();
    });
});
loop.start();

The animitter object comes with the property running this counter indicates the number of animitter instances that are currently animating. This can be helpful for debugging to ensure that you are properly stopping all of your animitter instances.