Animating Raster Frames in SVG and DHTML

Submitted by Rob on Tue, 02/28/2006 - 23:50
I got a little furthur with the websprites demo I started earlier this month. I've decided to hold off on the XSLT source document for now since I find the development toolchain just gets too long for me at this stage. Maybe when I have more documents to generalize from I'll go back to using XSLT for the source. After all, isn't that what XSLT is for? Transforming many documents with the same semantics in a similar fashion? I found that I didn't have a thread to extend from. What I've done on this little sprite demo is just one document that I really don't have a concrete plan for right now. Really it's just a few documents. One HTML document, one SVG and a Javascript source file. So I went to work on building just the pieces as they're delivered to the browser. The DHTML document is similar to what I showed earlier, but with some more interaction. The SVG version provides the same visual result at a given resolution as the DHTML version, but through a slightly different mechanism. The two versions are similar enough that the same Javascript drives both with just a couple lines that are conditional on the file format. To handle the same raster animation as the DHTML example, I used an svg:image element contained inside a viewBox that crops out all the other frames of animation. The animation is handled by packing many frames in a single image, the same one that I used previously. I've also created strips of frames for facing the sprite in different directions. You'll notice a hiccup when turning the first time as the images are loaded. These frames are moved through the viewable part of the image element by adjusting the x value at each rendering update.
The other big difference from the previous version of my demo is that the sprite moves around. This is more simple Javascript motion, and it looks a little jerky to me. That could be a number of things, not the least of which being that I haven't made any real effort to synchronize the animation to some rate of motion. I like my little animation frames that I rasterized from SVG, but I'm going to look at some real tools to make nice looking drawings. One of the important features of candidate tools is a 'simulate drawing talent' button. Oh, here are the demos I was talking about.