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 JPEG images.
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
GIF; and - 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:
- JavaScript-coded animation;
- CSS animation; and
- SVG-based SMIL animation.
Animation has been coded in terms of JavaScript since JavaScript first became available, and continues to be widely used. Nowadays it most often appears as an invocation of a standard library function, for several widely-used libraries support animation. The library vendors adequately document what these libraries do.
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 height and width, and so on. Notice also the robustness of this animation, at least in comparison to JavaScript, where a greedy thread doing other processing has the potential to delay or stall the thread which managers animation.
Browsers are building in remarkable capabilities. It's a good time to use them.
