We can animate image strips called sprites by creating arrays and functions using the Easel.js
JavaScript library and then manipulating them with the canvas
element. In this recipe, we will animate the same strip but display two differently timed sequences.
Download the code files for this recipe to use the Easel.js
framework library as well as supporting files. You will need a recent browser that will display HTML5 elements to view properly and test the code used in this recipe.
Create the opening tags for an HTML5 file. Your code should look similar to the following code block:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> Animating images using BitmapSequence and SpriteSheet</title>
Link to the main stylesheet styles.css
used in this recipe: <link href="styles.css" rel="stylesheet" type="text/css" ...