闲来无事,写了段js仿google首页动画,附源码下载

打开google,发现logo又有新玩意了,又是动画,简单看了一下,还是原来的老样子,将图片一部分一部分的显示出来做成动画效果,粗略估计了一下,功能应该挺简单的,隔了好久没手写js了,手痒痒,于是准备动手写几行代码看看。谁知,一写又是一大串,不扯那么多,效果图如下:

 

 

DEMO(点击图片即可):

功能挺简单:
1.可以自动根据动画容器的尺寸来将图片分割成不同帧。
2.理论上支持图片中的帧可多行排列(比如:要播放的动画有30帧,google现在的做法是全部放在1行,理论上这里可以放成3行,每行10帧)。
3.纯手写,没有引用其它js框架辅助.

 

没去分析google的js,不知道他们的图片是怎么弄的,下载到的图片前段部分有空白,所以用ps小小处理了一下。

只是模仿了动画部分,一些细节没做处理,比如google首页载入后有个动画是自动播放且在没点击前是重复播放的。 

另外还有个缺点,依赖播放容器的background属性,代码写得太长了,就没多大兴趣了,没去研究怎么改进,有兴趣的同学可以处理一下。
代码写得比较乱,有简单注释,大家凑合着看看。代码可无限制使用,但出了问题自己负责修复,当然,有空的话也不妨把改进后的版本发给我。 

 

附源码下载:点我下载 

加DEMO到文章里加得好辛苦,觉得有用的同学不妨点点推荐或留个回复鼓励一下...

(完) 

 

posted @ 2011-10-12 03:41  I,Robot  Views(6896)  Comments(70Edit  收藏  举报