Javascript 补间动画操作

早期前看过cloudgamer一篇介绍js 缓动算法的blog,前段时间因为项目需要，所以又看了一遍，非常感谢cloudgamer提供算法,虽然这个算法是来自ActionScript 2.0,我这次只是将该算法封装，然后提供了一些操作补间动画的方法(其中也参考了一些著名的js类库调用方式),希望能帮到有需要的人,实现更好用户体验的web应用程序.

ps:补间动画听的最多的应该就是在flash上，所谓补间动画又叫做中间帧动画，渐变动画，只要建立起始和结束的画面，中间部分由软件自动生成，省去了中间动画制作的复杂过程

 

废话不多说了,这次提供的完整类名是Lei.Tween,当然可以说Lei.Tween是在模拟补间动画,完全满足补间动画概念基本不可能实现,

首先说明一下调用方式

 

var T=new Lei.Tween(a,b,c);

a: 动画对象,可以传递object 或 id(string)

b: 参数集合对象，包括:

{ css 名称:{from:初使值,to:结束值}...}

 例:

 {"width":{from:10,to:100}} //将对象的width从10px 扩大到 100px

 {"width":{to:100}} //将对象的width从当前值扩大到100px

 {"width":{to:100},"height":{to:100}} //同时将对象的width与height从当前值扩大到100px

 

c: 参数集合包括

 

{
duration: 100,                      //持续时间,值越大,动画速度越慢
tweenType: "Linear",         //Tween类型(缓动类型)
easeType: "easeIn",          //Tween缓动类型,配合tweenType属性
onStart: null,                     //动画开始时触发事件
onEnd: null                         //动画结束后触发事件
}

 

方法

T.play(); //播放动画

 

我们来看一个简单实例,这个实例效果就是将一个id为test的div均匀放大的效果.

 

var  T = new  Lei.Tween( " test " ,
{
  " width " :{from: 10 ,to: 100 }
});
T.play();

 

接下来我们给这个动画加上缓动效果. 关于缓动效果的算法及描述请参考cloudgamer的一篇blog,效果请查看后面的效果演示

var T = new  Lei.Tween( " test " ,
 { " width " :{from: 10 ,to: 100 }},
 {tweenType: " Bounce " ,easeType: " easeInOut " });
T.play();

 

 使用onEnd事件来实现动画连续.下面的这个实例是将div宽度放大完成后，继续将高度放大

 

new  Lei.Tween( " test456 " ,{ " width " :{from: 10 ,to: 100 }},
       {onEnd: function (o){ // 默认参数:当前对象
　　　　      new  Lei.Tween(o,{ " height " :{from: 10 ,to: 100 }}).play();
       }
       }).play();

 

 

 

支持颜色渐变

 

var  T  =   new  Lei.Tween( " test " ,{ " background-color " :{from: " #005BB7 " ,to: " #BF0065 " }},
     {duration: 150 }  // 减慢速度
   );

T.play();

 

 

 

 下面看看缓动类型的各种效果,缓动类型分为两种:tweenType与easeType,这些算法来自ActionScript2

 

 

 

 

如果上面效果不能正常查看，您还可以查看此处: http://w.d0086.com/sunlei/tween.htm

 

好吧，就写这么多，完整源码请在 这里下载

 

Lei.Tween可能还有很多因素未考虑全面,大家可以自行在源码上修改.也欢迎批评