JavaScript
(function () {
var clock, slice, layer;
// Create a canvas to draw on
layer = BLOCKS.layer({
parentElement: document.getElementById("demo")
});
// Create a slice
slice = BLOCKS.slice({
layer: layer,
imageSrc: "images/coin.png", // Define sprite sheet location
numberOfFrames: 10, // Define number of frames of animation
loop: true
});
// Create a clock
clock = BLOCKS.clock();
// Update and render the slice on each tick of the clock
clock.addEventListener("tick", function () {
slice.update();
if (slice.dirty) { // Clear the layer if the slice is dirty
layer.clear();
}
slice.render();
});
// Start the clock
clock.start();
} ());
Image
Demo