打開google，發(fā)現(xiàn)logo又有新玩意了，又是動(dòng)畫，簡(jiǎn)單看了一下，還是原來的老樣子，將圖片一部分一部分的顯示出來做成動(dòng)畫效果，粗略估計(jì)了一下，功能應(yīng)該挺簡(jiǎn)單的，隔了好久沒手寫js了，手癢癢，于是準(zhǔn)備動(dòng)手寫幾行代碼看看。誰知，一寫又是一大串，不扯那么多，效果圖如下：

功能挺簡(jiǎn)單：

1.可以自動(dòng)根據(jù)動(dòng)畫容器的尺寸來將圖片分割成不同幀。

2.理論上支持圖片中的幀可多行排列(比如：要播放的動(dòng)畫有30幀，google現(xiàn)在的做法是全部放在1行，理論上這里可以放成3行，每行10幀)。

3.純手寫,沒有引用其它js框架輔助.

沒去分析google的js，不知道他們的圖片是怎么弄的，下載到的圖片前段部分有空白，所以用ps小小處理了一下。

另外還有個(gè)缺點(diǎn)，依賴播放容器的background屬性，代碼寫得太長(zhǎng)了，就沒多大興趣了，沒去研究怎么改進(jìn)，有興趣的同學(xué)可以處理一下。

代碼寫得比較亂，有簡(jiǎn)單注釋，大家湊合著看看。代碼可無限制使用，但出了問題自己負(fù)責(zé)修復(fù)，當(dāng)然，有空的話也不妨把改進(jìn)后的版本發(fā)給我。 

附源碼下載:點(diǎn)我下載 

加DEMO到文章里加得好辛苦,覺得有用的同學(xué)不妨點(diǎn)點(diǎn)推薦或留個(gè)回復(fù)鼓勵(lì)一下...

(完)