Epic labs

Kineograph

As part of a project for one of our clients, it was necessary to play animations in order to make the site more lively. Very quickly we thought about using spritesheets.

We were unsatisfied with the existing solutions, therefore we decided to build Kineograph, a JavaScript library displaying sequences of images from a spritesheet.

Our library is inspired by the principles EaselJS put in place to manage animations using spritesheets in Canvas.

Starting with Kineograph

It’s really easy to implement. Simply create a new Kineograph object and pass the necessary parameters for your spritesheet to come alive.


var kineograph = new Kineograph({
  container: document.getElementById("kineograph_container"),
  images: ["img/spritesheet.png"],
  frames: {width: 100, height: 100, count: 50},
  animations: {
    onset: [0, 5, "loop"],
    loop: [6, 49, "loop"]
  },
  fps: 60
});

container: the container element for the animation

images: url to a spritesheet or a JavaScript Image object

frames: information concerning the frames of the image

width: the width of a frame

height: the height of a frame

count: the number of frames included in your image

animations: definitions of the various sequences your animation is made up of. You can have as many as you want and link them together. Each sequence is defined by an identifier and an array of settings.

  • parameter 1: index of the starting frame
  • parameter 2: index of the end frame
  • parameter 3: name of the following sequence

fps: number of frames displayed per second

Events

Two types of event listener can be attached to an Kineograph object.

onLoadComplete: this event is triggered when the spritesheet is loaded and the animation is ready to be used.


kineograph.onLoadComplete = function() {
  this.gotoAndPlay("onset");
}

onAnimationEnd: this event is triggered every time an animation is complete. The name of the animation, if there is one, is sent as a single parameter.


kineograph.onAnimationEnd = function(name) {
  console.log(name);
}

Methods

play(): loops the animation from the first frame regardless of defined sequences

stop(): stops the animation

gotoAndPlay(frameOrAnimation): plays the animation from the frame index or the name of the animation sequence passed as a parameter.

gotoAndStop(frameOrAnimation): stops the animation at the frame index or the name of the animation sequence passed as a parameter.

getNumFrames(animation): returns the number of frames that contains the animation sequence whose name is passed as a parameter or the number of frames that contains the entire sequence if no name is given.

getAnimations(): returns the names of all the animation sequences.

getAnimation(name): returns the data associated with the animation sequence whose name is passed as a parameter.

getFrame(frameIndex): returns a frame object whose index corresponds to the value passed as parameter.

With Kineograph you can offer your users a richer HTML/JavaScript experience which is supported on most browsers, even older versions such as IE7. Kineograph uses can be numerous and varied.
Give your imagination free rein and surprise us!

by fabrice Comments Off
Uncategorized

Comments are closed.

Why labs?

Our desire to be always on the cutting edge often leads to research and experimentation.
Therefore we decided to share the results with you and maybe you will find the inspiration to lead them further.