July 05, 2010, 5:34 PM — 'Ever needed to animate a sequence of images, and run into the historical irritation that only
GIF defines an effective standard for animation? In fact, there are other choices; if you're viewing this particular page through Safari, Chrome, Opera, or a few other modern browsers (Internet Explorer 9 and Firefox 4 are scheduled to join the crowd later), for example, you see embedded
in this sentence a small bouncing ball realized as an animation of
The techniques this particular Tip discusses are not new, nor are they widely-used, for several reasons:
- Most Web designers prefer Flash or video formats or other "high-end" solutions;
- When you do choose image animation, of course, you can in principle re-format your sequence as
- Not all browsers support all the techniques discussed here.
If you know you and any other readers will have a modern browser available, though, and especially if you're looking for a "light-weight" solution, you'll want to know about these possibilities:
- CSS animation; and
- SVG-based SMIL animation.
Just in the last few years, a more declarative approach has become possible since browsers have begun to support 2008's definition of "CSS animation". Many articles on CSS animation appeared in 2009 and 2010.
SVG to the rescue
My favorite for quick animations, though, is none of these; what I find as the most concise and readable implementation is SMIL animation which SVG builds in. It's quite brief: the entire source is
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width = '40' height = '40' > <g id="test"/> <image width = '40' height = '40' xlink:href="BouncingBall1.jpg"> <animate attributeName="xlink:href" attributeType="XML" values = 'BouncingBall1.jpg;BouncingBall2.jpg;BouncingBall3.jpg;BouncingBall4.jpg' dur="1s" repeatCount="indefinite"/> </image> </svg>
Do you see what this does? SVG's definition gives it the ability to render other image formats, and it can animate all that it knows. To use it this way--SVG without any of SVG's own graphics--is a kind of hack, something on the order of having a conversation with someone in the next room by way of IRC bounced through a server on a different continent. I find it convenient, though, and perhaps you will also. If the infrastructure is there, we might as well use it. More soberly, this kind of hack is, if nothing else, a good opportunity to practice with SVG, and especially to recognize how programmable it is. You can read for yourself how easy it is to insert more images into the
values animation sequence, adjust its