Animate static images with jQuery plugin

  The easiest way to add simple animations into a webpage is by putting some GIF images. But this also make it hard, or impossible, to control the animation, for example, you cannot control when the animation begin, end or pause. Because animated GIFs are rendered and updated by browser, which is a black box for web front end design. To gain the control of your animation, you can use javascript. The basic idea is to have a list of images which is exactly all the frames of the animation, and use javascript to keep refreshing it with a timer. Fortunately, there are already jQuery plugins to help you do that. I found the most popular two: jAni and Spritely. But in order to use such plugins, you need to make all your frames into a form of "sprite", which can be easily done in my another article "Convert animated GIF into sprite".

  jAni is light-weight, easy-to-use and very simple. However, it can only handle one (ONE!) sprite at the same time. So if you need multiple animations on the page, you need to use Spritely. Using Sprite  is so easy. The following example is to create a repetitive animation with 10 frames and duration of 2 sec:
  1. create a div with appropriate class and id (#t1 in this case)
  2. assign sprite to the div in css
  3. to play animation in Sprite:

     $('#t1').sprite({fps: 5, no_of_frames: 10}).active();

  

  Done! Enjoy using it!