類比Google今日使用的css動畫

　　不知道大家有沒有注意到Google今天官網上的logo，剛開始一看還以為是gif，在仔細一看，發現並非如此，原來是使用CSS Sprite技術，利用一個初始圖片和一張畫滿各個動作的拼接圖片，從而實現了動畫效果。

　　本人一時手癢，就想把這個扒下來，但發現Google的js寫的太牛逼了，無奈，只能自己用自己的思維去類比一個了。首先，需要兩張圖，分別是：

　　當有這兩張圖後，我們就可以開始類比了。

　　我先通過firebug觀察，發現google首頁在啟動並執行時候會迴圈載入以下html代碼：

<div id="hplogo0" style="left:307px;top:48px;width:88px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;"></div><div id="hplogo1" style="left:307px;top:48px;width:89px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;"></div><div id="hplogo2" style="left:307px;top:48px;width:91px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;"></div><div id="hplogo3" style="left:305px;top:49px;width:93px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -268px 0px transparent;"></div><div id="hplogo4" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -361px 0px transparent;"></div><div id="hplogo5" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -454px 0px transparent;"></div><div id="hplogo6" style="left:306px;top:52px;width:92px;height:86px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -547px 0px transparent;"></div><div id="hplogo7" style="left:305px;top:53px;width:93px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -639px 0px transparent;"></div><div id="hplogo8" style="left:305px;top:54px;width:94px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -732px 0px transparent;"></div><div id="hplogo9" style="left:306px;top:54px;width:93px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -826px 0px transparent;"></div><div id="hplogo10" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -919px 0px transparent;"></div><div id="hplogo11" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1011px 0px transparent;"></div><div id="hplogo12" style="left:308px;top:54px;width:90px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1103px 0px transparent;"></div>......

　　實際上這就是實現動畫效果的因素，但我發現，我可以迴圈產生，但是我無法迴圈產生每個div裡的樣式，因為樣式的寬高、位移像素都是無規律的，所以我的做法就是，把Google產生好的代碼複製過來，然後預設全部隱藏，然後迴圈讓其顯示出來。

　　原理就是這樣，js的實現也更為簡單，所以我就沒用jquery，以下是js實現代碼：

var i=0;window.setInterval(google,83);function google(){if(i<=154){var logo = document.getElementById("hplogo"+i);logo.style.display = 'block';}i++;}

　　大功告成，看下demo吧。

　　順便把源碼也附上吧，沒太多技術含量，如果有問題，希望賜教。源碼下載

　　附1：後來我發現google原來是把座標等資訊存在js數組裡，然後迴圈添加div元素的時候，把值一併寫進去，相關閱讀《喜歡今天的Google LOGO 瑪莎·葛蘭姆》

　　附2：補充知識

　　Google今日塗鴉是為了紀念現代舞先驅瑪莎·葛蘭姆（Martha Graham，1894年5月11日－1991年4月1日）117周年誕辰，他是美國舞蹈家和編舞家，也是現代舞蹈史的創始人之一。其作品多以美國人文或是希臘古典神話為主題，代表作有《原始的神秘》（Primitive Mysteries，1936年）、《給世界的信》（Letter to the World，1940年）、《阿帕拉契山脈之春》 （Appalachian Spring，1944年）、《夜旅》（Night Journey，1947年）。