谷歌主頁實(shí)現(xiàn)月食實(shí)時(shí)記錄搶先揭秘
原創(chuàng)【51CTO 新鮮譯文】 谷歌近來一直在嘗試將各種新概念加入到其主頁上的主題欄當(dāng)中，而谷歌如何的主題欄中實(shí)現(xiàn)各類創(chuàng)意也早已不是秘密。不過今天，他們拋出了更為天馬行空的創(chuàng)意：在主頁上實(shí)時(shí)記錄整個月食過程。
谷歌主頁月食圖案
近十年以來持續(xù)時(shí)間最長的一次月食當(dāng)初也是由谷歌在youtube上實(shí)時(shí)放送的，這一事件同時(shí)登上了谷歌的主題欄。現(xiàn)在就讓我們回顧一下整套實(shí)時(shí)放送是如何實(shí)現(xiàn)的吧。
當(dāng)時(shí)的主題欄月食圖案在概念闡釋方面較為直觀，因?yàn)樗?A target=_blank>CSS 3腳本與JavaScript腳本協(xié)同處理的結(jié)果。
1.背景圖片
月食主題的背景圖案
如大家所見，這是一幅靜態(tài)圖像，中央部分為月亮留出了透明的圓形空缺，并在月食過程中即時(shí)加載不同的效果。
2.動態(tài)月球影像
與之前利用CSS腳本的做法不同，這一次主題欄會采取動態(tài)影像的處理方式。今天我們所看到的實(shí)時(shí)月球影像，實(shí)際上是一系列拍攝間隔較短的實(shí)景照片的有序排列。
這些圖片是由谷歌拍攝并實(shí)時(shí)添加到資源庫當(dāng)中的，因此無論大家何時(shí)刷新頁面，主題欄中出現(xiàn)的總是正確的當(dāng)前月食情況。
而下面這幅細(xì)長的圖像則顯示了月食發(fā)生較長時(shí)間之后的情景。很明顯月球圖案的采集數(shù)量增加了，這意味著當(dāng)前的***情景處于最右側(cè)圖片的狀態(tài)，而動態(tài)效果則也是由滿月向最右側(cè)的狀況轉(zhuǎn)變。
谷歌月食主題中的動態(tài)圖像（點(diǎn)擊圖片可看高清圖片）
谷歌月食主題中的動態(tài)圖像（點(diǎn)擊圖片可看高清圖片）
調(diào)用圖像如果仍然用CSS 3腳本動畫實(shí)現(xiàn)，無疑隨著動畫長度的增加，文件也會變得相當(dāng)龐大。
而在月食發(fā)生的一百分鐘里，谷歌需要保證按時(shí)上傳當(dāng)前***的月球圖片。在此前的Martha Graham(美國現(xiàn)代舞表演創(chuàng)始人)主題中，所有的舞蹈動作都被描繪在同一幅圖片中。但這一次，月食圖片需要以動態(tài)方式添加及創(chuàng)建。
全部月球?qū)嵕皥D都調(diào)用自下列網(wǎng)址URL : http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308162471 且此網(wǎng)址并非固定不變的。
3.動畫:
這里我們要說到月食動畫。當(dāng)google.com頁面進(jìn)行載入時(shí)，以上所列的圖片也將同時(shí)在瀏覽器中進(jìn)入緩沖狀態(tài)。當(dāng)整體緩沖動作結(jié)束時(shí)，動畫隨即開始播放。當(dāng)圖片按腳本的安排由左側(cè)向右側(cè)逐幅顯示時(shí)，動態(tài)動畫也就呈現(xiàn)出來了。
默認(rèn)的月球圖片(即左側(cè)***幅)會先于其它一系列圖片被載入。因此在全部圖片都緩沖結(jié)束之前，我們不會看到其它幀中的內(nèi)容。
谷歌主題欄中默認(rèn)的月球圖片
4.編碼
其實(shí)這里并不涉及太多的編碼工作，除了每個坐標(biāo)點(diǎn)需要載入的CSS 3腳本。
- <div id="moon" style="background-image: url(http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308164511);
- background-position: 0px 0px; "></div>
- <div id="moon" style="background-image: url(http://www.google.com/logos/2011/eclipse/strip.jpg?cache=1308164511);
- background-position: -2912px 0px; "></div>
5.月食實(shí)時(shí)狀況播放器
月食狀況播放器
這款實(shí)時(shí)播放器能夠幫助我們通過拖動進(jìn)度條來以觀察不同階段的月食狀況。播放器本身非常簡單，只需制作一個能夠動態(tài)演示月球變化進(jìn)程的腳本即可。
我們將一直與大家分享谷歌主題欄的制作心得。如果大家感興趣，歡迎來我們的Facebook及Twitter以獲取***的信息。
原文鏈接：
http://devlup.com/html5/google-livestreaming-lunar-eclipse-doodle-how-did-they-do/2165/
【編輯推薦】
