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

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 };

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

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 }

函数说明: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 |
跳动缓动 |
tween 缓动动画的更多相关文章
- jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
- WPF界面设计技巧(7)—模拟电梯升降的缓动动画
原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...
- Windows Phone开发(42):缓动动画
原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
- JS基础知识——缓动动画
基于距离的缓动动画 原理:设定起始位置 start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10; 这个10不是固定的,想分成多少份就分成 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- js off 缓动动画
动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式 步长=(目标位置-本身位置)/ ...
随机推荐
- node升级的正确方法
本文主要是针对安装了node的用户如何对node进行升级或者安装指定版本:没有安装node的可以参考连接node安装方法 . 安装方法: 1.产看node版本,没安装的请先安装: $ node -v ...
- Java内存列表
当jvm运行起来的时候,它会向系统申请一片内存区,并将这块内存分出一部分存储程序创建的对象,传递给方法的参数,返回值,局部变量等等,我们将这块内存称之为“运行时数据区”. 初学的时候把Java内存分为 ...
- 竖直的ViewPager,上下滑动的ViewPager,VerticalViewPager ;
直接看代码吧,重写Viewpager,改变了手势和切换效果:和正常的Viewpager使用一模一样: /** * ChenboCui 竖向的Viewpager */ public class Vert ...
- java中Arrays的用法
Arrays是针对数组的工具类,可以进行 排序,查找,复制填充等功能. 大大提高了开发人员的工作效率. 一 数组复制 与使用System.arraycopy进行数组复制类似的, Arrays提供了一个 ...
- 小程序开发------mpvue开发时间轴
亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) 效果展示: 技术栈:mpvue demo==> 代码:
- html2canvas html截图插件
以下我总结了一些注意事项,在代码中注释了,仅供参考. html2canvas.js点击付:完整使用的demo ,如下: <!DOCTYPE html><html lang=" ...
- django之normalize函数的功能
from django.utils.regex_helper import normalize pat=r'^(?P<id>\d+)/(?P<name>\d+)$' bits= ...
- JAVA字符串类
一.字符串类String1.String是一个类,位于java.lang包中2.创建一个字符串对象的2种方式: String 变量名=“值”; String 对象名=new String(“值”);3 ...
- xadmin增加用户 除了账号和密码 添加其他信息
默认xadmin在添加账号的时候只有账号和密码 我们可以添加其他信息 打开源码 xadmin -> plugins -> auth -> 找到self.form = UserCrea ...
- P45 实践作业
1. 影评: 观众数量多少,决定被虐者死亡速度的快慢.这一新奇但是残忍的想法,无疑是<网络杀机>的点睛之笔.公众.媒体对凶手网站主造成的伤害,比起那些用恶毒言论还要让人难受千百倍.他是一个 ...