言归正传。相信大家最初看到google首页出现的图标动画的时候,特别是发现原来那么传神的效果居然不是flash的时候,肯定感觉很惊奇吧?起码当初我就是这样的感觉。是不是认为要用js实现那样的动化简直有点不可思意呢?
先给大家看看实现的效果:
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
老调重谈几句,我的BlueEffects效果库在这个博客其实已经发布了很久了,也许是我阐述不够详细的缘故吧,大家了解的还是不多。其实 BlueEffects真的是一个虽然轻量级,但是功能很强大的效果库。弄明白了的话,通过灵活组合或者拆分改写可以实现很多让人眼晕的强大效果。博客里 面也有好几篇文章说到精灵部落,精灵部落确实有很多很不错的效果,也相信确实亲身加入体验了一把的朋友都会感觉还不错。虽然现在还没有决定要全部开源给大家,但我确实很乐意跟大家分享其中的心得体会,愿和感兴趣的朋友交流,知无不言。还有就是,前段时间精灵部落刚上线测试的时候,确实由于太匆忙没有做好工作,不少朋友直接就没办法访问。通过近段时间的改进,基本上已经可以保证大家进去体验一下了。不过问题肯定还有的,大家多多交流!之前没有了解过精灵部落的朋友,可以先看看我博客的其他文章,相信你也会有兴趣体验一下哦!
下面我就来讲讲,怎么用我的 BlueEffects效果库实现这个传神的效果!其实,整个实现过程用到的效果,只是BlueEffects其中的一个ImageShow的改写。
首先,介绍以下,整个动画,仅仅基于一张图片(这是从goole首页下载下来的原版图片哦):
每一个图标动画都是基于让这张图片显示不同位置的图象来实现的。而位置的设置,是通过css样式背景图片的位置来设置
相信看到这个图片都能想象到每个图标动画都是由5侦构成的,我这里,是这样定义这5侦的:
[{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下载中包含有详细的解释说明,这里不再重复。
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