Convert animated GIF into Sprite

  Sprite is a huge image which contains multiple sub-images, each of them is a frame of an animation. By combining different small pieces images into a large file, we can easily implement animation by offsetting a "window" in sprite. This technology is frequently used in performance-critical scenario, such like 2D video game animation. There are multiple tools to create a sprite, like Adobe PhotoShop or Flash. But if you want to convert an existent animated GIF into a sprite, you dont need to have such luxury tool. There is a more easy way to achieve this (but still not so trivial) by using ImageMagick. It's so simple, just a one line command:

montage input.gif -tile x1 -geometry '1x1+0+0<' -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 output.gif

Thats it! Remember that use your input file name to replace input.gif. Thanks to Nick. This awesome command is originally from TIGForums

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!