Animation Iterations

We’re updating the homepage in an effort to get something accomplished this week. Just kidding – really we’re starting an email database and the homepage needs to streamline viewer subscription. While the hood was popped, I went ahead and upgraded a handful of other assets. After spending an inordinate amount of time on animating a header graphic, I thought it might be cool to share the iterations. Take a look..

Here’s my static header image.

static homepageThe goal is to make an animated gif in which the sun rays rotated. It’s a pretty big graphic so file size is definitely an issue. However, for the first pass, we just want to get a benchmark. Enter “header-1.gif”

header-1.gif

robot and city 1Okay not too bad. Length is one second and the timing is 24 FPS. Loop timing is off though — you can see a little “tick” when it restarts the loop. File size is 567 KB which is WAY too big. Let’s see what happens when we cut the frame rate down.

header-2.gif

robot and city 2Whoa. Feels like watching Wheel of Fortune. In this version, the frame rate is 24 FPS but there’s only 4 frames. Let’s see what happens when we match make the frame rate AND the frame count equal (both at 4).

header-3.gif

robot and city 3Love it now that I’m looking at it (several hours later). But in the moment, it looked way to choppy.

header-4.gif

robot and city 4Seems too fast to me when I look at it now. At the moment of creation, though, this looked great compared to my first few iterations. At that point I was happy with the sun rays and decided to add some motion to the robot.

header-5.gif

robot and city 5

Overboard. Added several changes at once: back and forth movement to the robot, blinking eyes and motion blur. Since we’re still just dealing with 4 frames of animation, a small motion blur effect was added to every other frame to add the shaking effect. I wanted it to seem like the ground was shaking as the robot walked. Fun to see this but it needs to be dialed back.

header-6.gif

robot and city 6

Took out one of the blurred frames. Now the ground only shakes for every other rock/footstep he takes. Also dabbled with the eye blink. Still too much.

header-7.gif

robot and city 7Reduced the frame rate a bit to slow down the animation. It’s better but still not where it needs to be. I ran it by Steve and he suggested the stomping might be too much for the homepage. We want people to feel relaxed, happy and engaged.

header-8.gif

robot and city 8

Went back to the smooth higher FPS look. Steve said we can make the file size work using technology of which I’m un-aware. Who knew. It’s nice to have a programmer as a partner. Eyes are kawaii.

header-9.gif

robot and city 9Here’s the final… for now. After writing this, I can see about 5 more things to change/add but it’ll have to wait. On to the next thing!

Leave a Reply

Your email address will not be published. Required fields are marked *