Google首页的图标动画效果，很传神吧？自己也能完美实现，进来请看！！

最新推荐文章于 2024-08-15 08:55:57 发布

weixin_30674525

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量107

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/ublue2006/archive/2009/01/07/1371021.html

版权

言归正传。相信大家最初看到google首页出现的图标动画的时候，特别是发现原来那么传神的效果居然不是flash的时候，肯定感觉很惊奇吧？起码当初我就是这样的感觉。是不是认为要用js实现那样的动化简直有点不可思意呢？

先给大家看看实现的效果：

---------------------------------------------------------------------------------------------------

老调重谈几句，我的BlueEffects效果库在这个博客其实已经发布了很久了，也许是我阐述不够详细的缘故吧，大家了解的还是不多。其实 BlueEffects真的是一个虽然轻量级，但是功能很强大的效果库。弄明白了的话，通过灵活组合或者拆分改写可以实现很多让人眼晕的强大效果。博客里面也有好几篇文章说到精灵部落，精灵部落确实有很多很不错的效果，也相信确实亲身加入体验了一把的朋友都会感觉还不错。虽然现在还没有决定要全部开源给大家，但我确实很乐意跟大家分享其中的心得体会，愿和感兴趣的朋友交流，知无不言。还有就是，前段时间精灵部落刚上线测试的时候，确实由于太匆忙没有做好工作，不少朋友直接就没办法访问。通过近段时间的改进，基本上已经可以保证大家进去体验一下了。不过问题肯定还有的，大家多多交流！之前没有了解过精灵部落的朋友，可以先看看我博客的其他文章，相信你也会有兴趣体验一下哦！

下面我就来讲讲，怎么用我的 BlueEffects效果库实现这个传神的效果！其实，整个实现过程用到的效果，只是BlueEffects其中的一个ImageShow的改写。

首先，介绍以下，整个动画，仅仅基于一张图片（这是从goole首页下载下来的原版图片哦）：

每一个图标动画都是基于让这张图片显示不同位置的图象来实现的。而位置的设置，是通过css样式背景图片的位置来设置

相信看到这个图片都能想象到每个图标动画都是由5侦构成的，我这里，是这样定义这5侦的：

var Images1 =

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -220px"} ,//这里通过Position的设置来灵活实现每一侦动画要显示的图片的某个位置

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -220px"} ,

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -220px"} ,

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -220px"} ,

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -220px"} ,

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -220px"}

];

每侦是一个json对象，描述了使用的图片路径，背景平铺方式和背景位置等。实际动画的时候，则是按照一定的规则，比如每20ms解析显示其中一侦的信息，从而实现动画效果。下面是具体动画效果实现的代码：这个代码基本上在我原先发布的blueeffects下载中包含有详细的解释说明，这里不再重复。

var ImageShow = function (options)

{
2

var self=this;
4

this.MyTimeOut=null;
5

this.DeleteTimeOut=function()

{
6

if(self.MyTimeOut!=null)
7

clearTimeout(self.MyTimeOut);
8

};
10

this.NowIndex=0;
12

this.ASC=true;
13

this.errState=false;
14

var Images=[];
15

var TimeSpace=0;
16

if(options.Obj!=null&&options.Images!=null)

{
20

var Obj=options.Obj;
21

var TempImages=options.Images;
22

if(TempImages.length>=2)

{
23

var imgType;
24

try

{
25

for(var i=0;i<TempImages.length;i++)

{
26

var imageName=TempImages[i].Image;
27

imgType=imageName.toLowerCase().substring(TempImages[i].Image.length-4);
28

if(imgType==".jpg"||imgType==".gif"||imgType==".bmp"||imgType==".png"||imgType=="jpeg")

{
29

Images.push(TempImages[i]);
30

}
31

}
32

}
33

catch(err)

{}
34

}
35

if(options.TimeSpace!=null&&IsNum(options.TimeSpace)==true) TimeSpace=options.TimeSpace;
37

else TimeSpace=10;
38

if(TimeSpace<5) TimeSpace=5;
39

}
40

this.ChangeImage=function()

{
41

try

{
43

if(Images[self.NowIndex]!=null)
44

{
45

if(options.BackGround==true)

{
47

if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";
48

if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;
49

if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;
50

if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;

51 if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))

Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat;}
53

if(options.Src==true)

{
54

if(Images[self.NowIndex].Image!=null) Obj.src=Images[self.NowIndex].Image;
55

if(Images[self.NowIndex].Width!=null&&BlueEffects.IsNum(Images[self.NowIndex].Width)==true) Obj.style.width=Images[self.NowIndex].Width+"px";
56

if(Images[self.NowIndex].Height!=null&&BlueEffects.IsNum(Images[self.NowIndex].Height)==true) Obj.style.height=Images[self.NowIndex].Height+"px"; }
57

if(options.BackGround!=true&&options.Src!=true)

{
58

if(Images[self.NowIndex].Image!=null) Obj.style.backgroundImage="url("+Images[self.NowIndex].Image+")";
59

if(Images[self.NowIndex].Position!=null) Obj.style.backgroundPosition=Images[self.NowIndex].Position;
60

if(Images[self.NowIndex].PositionX!=null) Obj.style.backgroundPositionX=Images[self.NowIndex].PositionX;
61

if(Images[self.NowIndex].PositionY!=null) Obj.style.backgroundPositionY=Images[self.NowIndex].PositionY;
62

if(Images[self.NowIndex].Repeat!=null&&(Images[self.NowIndex].Repeat=="repeat"||Images[self.NowIndex].Repeat=="no-repeat"||Images[self.NowIndex].Repeat=="repeat-x"||Images[self.NowIndex].Repeat=="repeat-y"))
63

Obj.style.backgroundRepeat=Images[self.NowIndex].Repeat; }
64

}
65

}
66

catch(err)
67

{self.errState=true;}
68

self.MyTimeOut=setTimeout(self.ChangeImage,TimeSpace);
70

if(self.ASC==false)
72

{
73

self.NowIndex--;
74

if(self.NowIndex<=-1||self.errState==true)

{
75

clearTimeout(self.MyTimeOut);
76

if(options.Stop!=null)try

{options.Stop();}catch(err)

{}
77

}
78

}
79

else if(self.ASC==true)
80

{
81

self.NowIndex++;
82

if(self.NowIndex>=Images.length+1||self.errState==true)

{
83

clearTimeout(self.MyTimeOut);
84

if(options.Stop!=null)try

{options.Stop();}catch(err)

{}
85

}
86

}
87

}//end this.ChangeImage
88

} // end ImageShow

下面调用这个可以通用的动画效果，实现本特定动画效果：

< script type = " text/javascript " >
2

var Images2 =
4

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px 0px"} ,
5

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px 0px"} ,
6

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px 0px"} ,
7

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px 0px"} ,
8

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px 0px"} ,
9

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px 2px"} ,
10

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px 0px"}
11

];
12

var Images3 =
14

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -35px"} ,
15

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -35px"} ,
16

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -35px"} ,
17

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -35px"} ,
18

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -35px"} ,
19

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -35px"} ,
20

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -35px"}
21

];
22

var Images4 =
24

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -72px"} ,
25

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -72px"} ,
26

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -72px"} ,
27

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -72px"} ,
28

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -72px"} ,
29

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -72px"} ,
30

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -72px"}
31

];
32

var Images5 =
34

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -109px"} ,
35

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -109px"} ,
36

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -109px"} ,
37

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -109px"} ,
38

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -109px"} ,
39

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -109px"} ,
40

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -109px"}
41

];
42

var Images6 =
44

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -145px"} ,
45

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -145px"} ,
46

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -145px"} ,
47

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -145px"} ,
48

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -145px"} ,
49

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -145px"} ,
50

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -145px"}
51

];
52

var Images7 =
54

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -183px"} ,
55

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -183px"} ,
56

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -183px"} ,
57

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -183px"} ,
58

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -183px"} ,
59

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -183px"} ,
60

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -183px"}
61

];
62

var Images1 =
64

[

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-5px -220px"} ,
65

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-55px -220px"} ,
66

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-105px -220px"} ,
67

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-155px -220px"} ,
68

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -220px"} ,
69

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -220px"} ,
70

{Image:"../Images/toolbar.png",Repeat:"no-repeat",Position:"-205px -220px"}
71

];
72

//前面7个数组，分别定义7个图标动画的侦信息。
74

var Show1 = null ;
75

var Show2 = null ;
76

var Show3 = null ;
77

var Show4 = null ;
78

var Show5 = null ;
79

var Show6 = null ;
80

var Show7 = null ;
81

function MouseOver(Num)
83

{
84

var Obj=null;
85

if(Num==1)
86

Obj=Show1;
87

else if(Num==2)
88

Obj=Show2;
89

else if(Num==3)
90

Obj=Show3;
91

else if(Num==4)
92

Obj=Show4;
93

else if(Num==5)
94

Obj=Show5;
95

else if(Num==6)
96

Obj=Show6;
97

else if(Num==7)
98

Obj=Show7;
99

100

Obj.DeleteTimeOut();//首先要停止动画
101

Obj.ASC=true; //设定按正常顺序显示侦
102

Obj.ChangeImage(); // 开始动画
103

}
104

105

function MouseOut(Num)
106

{
107

var Obj=null;
108

if(Num==1)
109

Obj=Show1;
110

else if(Num==2)
111

Obj=Show2;
112

else if(Num==3)
113

Obj=Show3;
114

else if(Num==4)
115

Obj=Show4;
116

else if(Num==5)
117

Obj=Show5;
118

else if(Num==6)
119

Obj=Show6;
120

else if(Num==7)
121

Obj=Show7;
122

Obj.DeleteTimeOut();
123

Obj.ASC=false;//倒序显示侦
124

Obj.ChangeImage();
125

// alert(Show.NowIndex);
126

}
127

128

function Loaded()
129

{
130

Show1=new ImageShow(

{Obj:document.getElementById("ImgArea1"),TimeSpace:50,Images:Images1,BackGround:true});
131

Show2=new ImageShow(

{Obj:document.getElementById("ImgArea2"),TimeSpace:50,Images:Images2,BackGround:true});
132

Show3=new ImageShow(

{Obj:document.getElementById("ImgArea3"),TimeSpace:50,Images:Images3,BackGround:true});
133

Show4=new ImageShow(

{Obj:document.getElementById("ImgArea4"),TimeSpace:50,Images:Images4,BackGround:true});
134

Show5=new ImageShow(

{Obj:document.getElementById("ImgArea5"),TimeSpace:50,Images:Images5,BackGround:true});
135

Show6=new ImageShow(

{Obj:document.getElementById("ImgArea6"),TimeSpace:50,Images:Images6,BackGround:true});

136 Show7=new ImageShow({Obj:document.getElementById("ImgArea7"),TimeSpace:50,Images:Images7,BackGround:true});

//分别为每个图标动画生成一个动画对象

137

MouseOver(1); MouseOver(2);MouseOver(3);MouseOver(4);MouseOver(5);MouseOver(6);MouseOver(7);//页面载入后执行第一次动画，显示图标
138

}
139

Loaded();

欢迎大家一起交流，不是很善表述，但有对细节的疑问的话提出来很乐意回答，谢谢！

转载于:https://www.cnblogs.com/ublue2006/archive/2009/01/07/1371021.html

weixin_30674525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google首页的图标动画效果，很传神吧？自己也能完美实现，进来请看！！

言归正传。相信大家最初看到google首页出现的图标动画的时候，特别是发现原来那么传神的效果居然不是flash的时候，肯定感觉很惊奇吧？起码当初我就是这样的感觉。是不是认为要用js实现那样的动化简直有点不可思意呢？先给大家看看实现的效果： -------------------------------------------------------------...
复制链接

扫一扫