Google首页的图标动画效果，很传神吧？自己也能完美实现，进来请看！！
言归正传。相信大家最初看到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"}, {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
9
}; 10
11
this.NowIndex=0;12
this.ASC=true;13
this.errState=false; 14
var Images=[];15
var TimeSpace=0; 16
17
18
19
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
36
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
42
try{ 43
if(Images[self.NowIndex]!=null)44
{ 45
46
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"))
52
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
69
self.MyTimeOut=setTimeout(self.ChangeImage,TimeSpace);70
71
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.ChangeImage88
} //end ImageShow
下面调用这个可以通用的动画效果，实现本特定动画效果：
<script type="text/javascript">2
3
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
13
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
23
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
33
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
43
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
53
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
63
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
73
//前面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
82
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});
//分别为每个图标动画 生成一个动画对象
MouseOver(1); MouseOver(2);MouseOver(3);MouseOver(4);MouseOver(5);MouseOver(6);MouseOver(7);//页面载入后执行第一次动画，显示图标138
}139
Loaded();
欢迎大家一起交流，不是很善表述，但有对细节的疑问的话提出来很乐意回答，谢谢！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述