FrameRat.js

An open source animation frame library written in Javascript.

About

The purpose of this library is to provide a simple way to control an animation while providing useful methods to monitor it and polyfills.

Check Example and Code section for more information on how to use FrameRat.js. There is also a documentation if you need to go deeper.

You can help develop FrameRat.js on Github.

Example

Code

Javascript (main.js)

Instantiate an animation with an onAnimate callback .

var animation = FRAMERAT.create(render);

Render function

function render(){
  clearFrame();
  drawStuff();
  writeStuff('Elapsed time : '     + animation.getTotalTime(0) + ' seconds');
  writeStuff('Frame number : '     + animation.getFrameNumber());
  writeStuff('Frame Per Second : ' + animation.getFramePerSecond(30, 0));
  writeStuff('Frame duration : '   + animation.getDelta().getSecond();
  writeStuff('Rounded Frame duration : ' + animation.getRoundedDelta(30, 0).getMillisecond() + ' ms');
  animation.newFrame();
}

Play, Pause, Stop functions

function playAnimation(){ //bind a button to this function
  animation.play();
}

function pauseAnimation () { //bind a button to this function
  animation.pause();
}

function stopAnimation () { //bind a button to this function
  animation.stop();
  clearFrame();
}

Contact me

Feel free to ask me about my work, give me suggestions, or just to say hi.