打开google,发现logo又有新玩意了,又是动画,简单看了一下,还是原来的老样子,将图片一部分一部分的显示出来做成动画效果,粗略估计了一下,功能应该挺简单的,隔了好久没手写js了,手痒痒,于是准备动手写几行代码看看。谁知,一写又是一大串,不扯那么多,效果图如下:
DEMO(点击图片即可):
功能挺简单:
1.可以自动根据动画容器的尺寸来将图片分割成不同帧。
2.理论上支持图片中的帧可多行排列(比如:要播放的动画有30帧,google现在的做法是全部放在1行,理论上这里可以放成3行,每行10帧)。
3.纯手写,没有引用其它js框架辅助.
没去分析google的js,不知道他们的图片是怎么弄的,下载到的图片前段部分有空白,所以用ps小小处理了一下。
只是模仿了动画部分,一些细节没做处理,比如google首页载入后有个动画是自动播放且在没点击前是重复播放的。
另外还有个缺点,依赖播放容器的background属性,代码写得太长了,就没多大兴趣了,没去研究怎么改进,有兴趣的同学可以处理一下。
代码写得比较乱,有简单注释,大家凑合着看看。代码可无限制使用,但出了问题自己负责修复,当然,有空的话也不妨把改进后的版本发给我。