This makes animation frame 2 fade in on top of animation frame 1, as shown in the screen shot below: Increasing the image’s opacity makes it less transparent, so more and more of #2 is visible and less of #1 is visible. Google then uses a fast JavaScript timer to increase the opacity of #2 every 50 milliseconds. This setup is shown in the diagram below: The opacity property of #2 is set to 0, making it full transparent so animation frame 2 is not seen. To accomplish the effect, #1’s top property is set to show animation frame 1 and #2 is set to show animation frame 2. Let’s call the “lower” image tag #1 and the “upper” image tag #2. You can see this clearly using Firefox’s 3D DOM viewer, as shown in the screen shot below:Įach image is pointing at the filmstrip image. To accomplish this, Google uses two tags inside of the container and uses absolute positioning and z-index to place them directly on top of each other. They use opacity to fade between two different frames of animation and create, in effect, additional intermediate animation frames. In Google’s animation, the frames seem to fade into each other. However, this animation is jerky compared to Google’s Earth Day. slide the image correct frame of animation given by offset The code for this looks something like this: A diagram of this concept is shown below: ![]() The image is animated using JavaScript, which changes the top property for the absolutely positioned image to slide it up a fixed interval with the setTimeout() function. This creates a fixed window so to speak, which masks all but current animation frame. So how does Google make the filmstrip animation work? First they enclose the tag JPEG with all the animation frames inside a tag that has a fixed height of 182 pixels and which hides overflow. Another animated doodle which uses filmstrip animation is this Gumby logo from October 2011. ![]() To clarify things, I will call this animation technique filmstrip animations. This is kind of like a CSS sprite, but each image is a frame of animation. There are 16 frames of animation stored this way, somewhat resembling a strip of film, as shown in the screen shot below: Instead of an animated GIF Google stored all the animation frames vertically inside a single JPEG image that is 468 pixels wide by 2912 pixels tall. However Google took what I think is a different and better approach. In fact, that is what I thought they were doing at first. Traditionally, this could be accomplished using an animated GIF image. The animation is 486 pixels wide by 182 pixels tall. Unlike previous animated doodles, it is not interactive. The Google Earth Day animation is a non-repeating linear sequence of images. The solution surprised me, and changed my mind about animated images on the web. Since I have been speaking so much about images recently, I thought it would be interesting to see how Google creates small and fast animations. This is certainly not the first animated doodle that Google has done. As with many holidays or anniversaries, Google celebrated Earth Day with an animated doodle.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |