Let's take some animations apart, and see what makes them tick, shall we?
August 17, 1999
Here is a small example (albeit 13KB) showing how, by simply 'stacking' layers on top of each other, we can produce 'perspective' in an animation. This image wasn't designed with any real purpose in mind, and so it may seem a tad trite for a Web page. Try to keep in mind that by using animations on your Web site, you're not only adding to the esthetics and interest of the pages, you're also adding more download time for your visitors.
So it's always a good practise to create them with very specific intentions, to embellish the message of your content, not just for 'eye-candy' sake. And on the same note, having more than 2 animations per page can not only boggle the eye, but put extra stress on the user's browser and system resources. What a party-pooper!
The above animation contains 11 images/layers. Each layer/image is a copy of the previous one, which has been altered slightly to produce changes in the progression of the sequence. It would be good to note here that what you're seeing in that animation is somewhat of an optical illusion. What I mean by that is that your eyes are seeing things that aren't really there (Kind of like when you don't go to sleep for 36 hours!).
Hey! Just for the fun of it, click here and check out this slightly different version of the eyes animation, where the individual frames were set to 'overlay' on top of each other instead of replacing each other. It's a tad more devious looking.
When your eyes perceive that animation, they're 'filling in' a bunch of blank spots where the animation isn't actually doing anything. Does anyone remember those little 'flip books' that were big way back in the ol' days? The ones that had a small drawing on each page of the book that was drawn in sequence to produce the illusion of a continuous animation, when you peeled back the pages with your thumb and let them flip over real fast, from under your thumb? That's the same principal here. Your eyes are so well designed (or so easily fooled) that they can 'create' (or imagine) the missing parts of an animation, which will make the sequence of broken movements 'appear' to flow more continuously than they really do.
Here again is the de-constructed smiley animation from page 2, where you can see exactly just how choppy the images look from one to the next. Notice all the 'missing' movements in the sequence? Well those empty spots will appear to be there when these images are played at an average rate of about 10/100s of a second. That's pretty fast per image. So fast in fact, that the images' positions will appear to blur together, and your eyes won't be able to see all the holes that are actually there. This point proves the 'eyes fooled' theory.
Here! Click this if you'd like to have your eyes fooled for a minute. See if you can tell just what parts of the face's movements your eyes are 'filling in'.
Essentially this all comes down to one thing again... file size! file size! file size! Why, that 'full facial contortion extravaganza' was only a measly 1.7 kb. Yep. It's a proven fact that fewer frames in an animation can heartily reduce the finished animation's file size - especially if you're using a Global Optimized Palette (hint hint). And that means? More happy visitors! If you don't 'need' all those extra frames in your animation, then why add them? Save yourself some work! (Unless you're entering a contest or something).
You'd be surprised to learn that most animations you see on big corporate type Web sites have fewer than 5-6 frames, tops. And most of them are optimized to the max. But hey! It gets the job done, right? Also keep in mind here that folks have gotten used to Web animations being slightly choppy-looking. And that's fine for the purpose they serve. What folks will never get used to though, is having to click on a link, go make dinner, wash the dog, run to the store, watch a movie, and come back to their browser to find an empty image icon where a bloated animation is trying to load.
In the last section, we'll look at various types of animations that are used on Web pages, and a method we can use to keep them lean and clean, so they'll load fast.
