![]() ![]() ![]() 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 |