作者:mobiledu2402852413 | 来源:互联网 | 2023-05-16 12:19
早期前看过cloudgamer一篇介绍js缓动算法的blog,前段时间因为项目需要,所以又看了一遍,非常感谢cloudgamer提供算法,虽然这个算法是来自ActionScript2.0,我这次只
早期前看过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可能还有很多因素未考虑全面,大家可以自行在源码上修改.也欢迎批评