在讲tween类之前,不得不提的是贝塞尔曲线了。首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等。无论运用在哪里,它们的原理都是一样的。同样,在用js实现运动效果时,我们也可以利用贝塞尔曲线来实现不同的特效,而tween.js就是一个封装好的计算辅助算法。你可以通过连续输入多个值,然后利用贝塞尔曲线公式输出不同的值,最终形成了一条光滑的曲线。因为一条曲线上的值的不一样的,所以我们可以利用曲线的特性创造出不同的效果。

  tween.js封装了多种效果的计算方法,我们可以利用里面的公式或者自己重写方法。以下是源代码,可根据自己的需要增删使用。 

tween 缓动动画-LMLPHP
  1 // Tween类
2 var Tween = {
3 Linear: function(t,b,c,d){ return c*t/d + b; },
4 Quad: {
5 easeIn: function(t,b,c,d){
6 return c*(t/=d)*t + b;
7 },
8 easeOut: function(t,b,c,d){
9 return -c *(t/=d)*(t-2) + b;
10 },
11 easeInOut: function(t,b,c,d){
12 if ((t/=d/2) < 1) return c/2*t*t + b;
13 return -c/2 * ((--t)*(t-2) - 1) + b;
14 }
15 },
16 Cubic: {
17 easeIn: function(t,b,c,d){
18 return c*(t/=d)*t*t + b;
19 },
20 easeOut: function(t,b,c,d){
21 return c*((t=t/d-1)*t*t + 1) + b;
22 },
23 easeInOut: function(t,b,c,d){
24 if ((t/=d/2) < 1) return c/2*t*t*t + b;
25 return c/2*((t-=2)*t*t + 2) + b;
26 }
27 },
28 Quart: {
29 easeIn: function(t,b,c,d){
30 return c*(t/=d)*t*t*t + b;
31 },
32 easeOut: function(t,b,c,d){
33 return -c * ((t=t/d-1)*t*t*t - 1) + b;
34 },
35 easeInOut: function(t,b,c,d){
36 if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
37 return -c/2 * ((t-=2)*t*t*t - 2) + b;
38 }
39 },
40 Quint: {
41 easeIn: function(t,b,c,d){
42 return c*(t/=d)*t*t*t*t + b;
43 },
44 easeOut: function(t,b,c,d){
45 return c*((t=t/d-1)*t*t*t*t + 1) + b;
46 },
47 easeInOut: function(t,b,c,d){
48 if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
49 return c/2*((t-=2)*t*t*t*t + 2) + b;
50 }
51 },
52 Sine: {
53 easeIn: function(t,b,c,d){
54 return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
55 },
56 easeOut: function(t,b,c,d){
57 return c * Math.sin(t/d * (Math.PI/2)) + b;
58 },
59 easeInOut: function(t,b,c,d){
60 return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
61 }
62 },
63 Expo: {
64 easeIn: function(t,b,c,d){
65 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
66 },
67 easeOut: function(t,b,c,d){
68 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
69 },
70 easeInOut: function(t,b,c,d){
71 if (t==0) return b;
72 if (t==d) return b+c;
73 if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
74 return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
75 }
76 },
77 Circ: {
78 easeIn: function(t,b,c,d){
79 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
80 },
81 easeOut: function(t,b,c,d){
82 return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
83 },
84 easeInOut: function(t,b,c,d){
85 if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
86 return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
87 }
88 },
89 Elastic: {
90 easeIn: function(t,b,c,d,a,p){
91 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
92 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
93 else var s = p/(2*Math.PI) * Math.asin (c/a);
94 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
95 },
96 easeOut: function(t,b,c,d,a,p){
97 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
98 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
99 else var s = p/(2*Math.PI) * Math.asin (c/a);
100 return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
101 },
102 easeInOut: function(t,b,c,d,a,p){
103 if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
104 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
105 else var s = p/(2*Math.PI) * Math.asin (c/a);
106 if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
107 return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
108 }
109 },
110 Back: {
111 easeIn: function(t,b,c,d,s){
112 if (s == undefined) s = 1.70158;
113 return c*(t/=d)*t*((s+1)*t - s) + b;
114 },
115 easeOut: function(t,b,c,d,s){
116 if (s == undefined) s = 1.70158;
117 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
118 },
119 easeInOut: function(t,b,c,d,s){
120 if (s == undefined) s = 1.70158;
121 if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
122 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
123 }
124 },
125 Bounce: {
126 easeIn: function(t,b,c,d){
127 return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
128 },
129 easeOut: function(t,b,c,d){
130 if ((t/=d) < (1/2.75)) {
131 return c*(7.5625*t*t) + b;
132 } else if (t < (2/2.75)) {
133 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
134 } else if (t < (2.5/2.75)) {
135 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
136 } else {
137 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
138 }
139 },
140 easeInOut: function(t,b,c,d){
141 if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
142 else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
143 }
144 }
145 };
tween 缓动动画-LMLPHP

  下载地址:http://pan.baidu.com/s/1sjQdWQx

  这个算法可以用在很多地方,如果滚动条的移动,物块的移动或各种渐变等等。今天我就用物块移动demo的例子来讲讲这个辅助计算类怎么用吧,首先我们得创建一个定时器或者函数,一下是我常用的方法。

tween 缓动动画-LMLPHP
 1             //利用tween.js返回特殊值,生成不同效果
2 function tweenFn(obj,attr,value,endFn){
3 var timer = null;
4 var start = 0; //开始位置
5 // var value = value //改变值大小
6 var t = 0; //从0步开始
7 var endT = 30; //结束步数
8 clearInterval(timer);
9 timer = setInterval(function(){
10 t++;
11 if(t>endT){
12 clearInterval(timer);
13 endFn && endFn();//回调函数存在则返回
14 return;
15 };
16 obj.style[attr] = Tween.Cubic.easeInOut(t,start,value,endT)+"px";
17 },30);
18 }
tween 缓动动画-LMLPHP

  函数说明:obj,绑定执行的对象;

       attr,改变的属性值;

       value,改变值的大小;

       endFn,执行完毕的回调函数,没有可不写;

       start,属性初始值;

       t,endT,执行的步数,可理解为分多少次执行完。

      函数第十六行中Tween.Cubic.easeInOut(...)为调用tween.js中的方法,可根据实际需求修改Cubic或easeInOut的值。我把里面所有的方法列表如下:

Linear

线性匀速变化

Quad

easeIn

easeOut

easeInOut  

二次方缓动Expo

easeIn

easeOut

easeInOut

指数曲线缓动
Cubic

easeIn

easeOut

easeInOut  

三次方缓动Circ easeIn

easeOut

easeInOut  

圆周曲线缓动
Quart easeIn

easeOut

easeInOut  

四次方缓动Elastic easeIn

easeOut

easeInOut  

弹性伸缩缓动
Quint

easeIn

easeOut

easeInOut   

五次方缓动Back easeIn

easeOut

easeInOut  

返回缓动
Sine easeIn

easeOut

easeInOut  

正弦曲线缓动Bounce easeIn

easeOut

easeInOut  

跳动缓动

05-03 20:51