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下载中包含有详细的解释说明，这里不再重复。

 1var 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.ChangeImage
88 } //end ImageShow

 

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

  1<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}); 

 

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

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

 

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

posted @ 2009-01-07 13:14  laoliao  阅读(3891)  评论(31)  编辑  收藏  举报