早期前看过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均匀放大的效果.
{
"width":{from:10,to:100}
});
T.play();
接下来我们给这个动画加上缓动效果. 关于缓动效果的算法及描述请参考cloudgamer的一篇blog,效果请查看后面的效果演示
{"width":{from:10,to:100}},
{tweenType:"Bounce",easeType:"easeInOut"});
T.play();
使用onEnd事件来实现动画连续.下面的这个实例是将div宽度放大完成后，继续将高度放大
{onEnd:function(o){//默认参数:当前对象
new Lei.Tween(o,{"height":{from:10,to:100}}).play();
}
}).play();
支持颜色渐变
{duration:150} //减慢速度
);
T.play();
下面看看缓动类型的各种效果,缓动类型分为两种:tweenType与easeType,这些算法来自ActionScript2
