Seamless looping weather symbol animation using Trapcode Particular, jQuery, and Spritely
A few weeks ago I had to produce a set of bespoke animations based on my ‘old-school’ weather symbols for use in an app – each as a single sheet of individual frames that could be cycled through within the app.
Anyway – it got me thinking about the (’new’) BBC weather icons I designed back in 2005 and whether I could produce a similar set of my own with more realistic weather effects using proper particles and then animate them somehow on a web page without resorting to animated GIFs…
With any luck you’ll be able to see a little ‘light snow showers’ icon looping away on the left there.
For anyone interested, I’ll quickly explain how it’s done…
Building the animations
All of the animations were built in After Effects, the rain, snow, sleet, hail etc were generated using Trapcode Particular from Red Giant Software (redgiantsoftware.com/products/all/trapcode-particular/).
The key to getting the animations to loop seamlessly was to create a single layer using Particular which had a load of particles created off screen at the top for just a few frames, so they all fall down through the shot and disappear completely at the bottom some time later. I then chose a nice frame somewhere in the middle that was full of particles and marked that frame as the loop point. Then I duplicated the layer and slid one of them forwards a bit.
The end result is that one layer has all the particles appearing from nothing (and ending at the ‘loop’ frame marker) while the other layer starts on the ‘loop’ frame marker and has all the particles disappearing out of shot. The overall effect is a single seamless loop of particles continuously falling. Obviously the total number of frames in your loop can’t be any less than half the time it takes for the particles to enter and leave the shot, otherwise the loop won’t be seamless. Actually, it probably needs to be exactly half. There’s a good tutorial by Aharon Rabinowitz on how to loop particles properly which explains it all very nicely.
With a little bit of fiddling it was pretty easy to get the rain animations down to a neat 16 frames. Obviously the snow falls more slowly, so ‘light snow’ ended up running to 64 frames. Heavy snow is at 48 frames, lightning 32, hail is 16.
Animating the sprites
Doing the actual animation on a web page is very easy. The example above and some more over here use Spritely (spritely.net). All you have to do is load jQuery and Spritely on the page, define a <div> element with the height and width of a single frame, and the whole image strip as the background and then one line of script starts the animation going using your specified frame rate (mine are all 25 frames per second) and the total number of frames in the animation.
Obviously there’s one more process I haven’t mentioned – which is basically how to stick 64 separate images together to form one long strip. I daresay there are utilities out there that allow you do this – but I’m grateful to Dan Waylonis from nekotech.com who wrote and sent me a little utility which does exactly that.
As always, if anyone is interested in finding out more, please do leave a comment.
And if you would like to have the full set of weather sprite animations they’re available as a download from the store.