在讲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 缓动动画的更多相关文章

  1. jQuery-1.9.1源码分析系列(十五) 动画处理——缓动动画核心Tween

    在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...

  2. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  3. WPF界面设计技巧(7)—模拟电梯升降的缓动动画

    原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...

  4. Windows Phone开发(42):缓动动画

    原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...

  5. 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

    原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...

  6. JS基础知识——缓动动画

    基于距离的缓动动画 原理:设定起始位置  start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10;     这个10不是固定的,想分成多少份就分成 ...

  7. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  8. js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  9. js off 缓动动画

    动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式      步长=(目标位置-本身位置)/ ...

随机推荐

  1. gcc centos 新版本的安装方法

    因为centos默认安装的gcc是GCC 4.*.* 是不支持 C++11 的,所以有些新的程序或软件要安装就行要升级GCC,否则无法编译通过 一.如下步骤安装不成功(yum install devt ...

  2. ubuntu-docker入门到放弃(八)创建支持SSH服务的镜像

    我们知道进入docker容器可以使用attach.exec等命令来操作和管理,但是如果需要远程登录并管理容器,就需要ssh服务的支持了. 1.基于commit命令创建 docker提供了commit命 ...

  3. Mysql数据库主从复制搭建

    Mysql数据库主从复制原理: 主库开启bin-log日志,同时生成IO线程.IO线程负责将用户写入数据库的sql语句记录在二进制日志bin-log,该记录过程可并发进行:生成标识号 server i ...

  4. ActiveMQ-5.15.2下载和启动(windows)

    一.下载和部署 我的ActiveMQ版本是 5.15.2,参照别人家的博客,下载和启动照样成功.别人家的博客地址: http://blog.csdn.net/clj198606061111/artic ...

  5. Python【每日一问】01

    问:深拷贝.浅拷贝.直接赋值的区别是什么?并举例说明 1.区别 (1)直接赋值:对象的引用 (2)浅拷贝(copy):拷贝父对象,不会拷贝对象的内部的子对象 (3)深拷贝(deepcopy): cop ...

  6. 用GDB调试程序(二)

    GDB的命令概貌——————— 启动gdb后,就你被带入gdb的调试环境中,就可以使用gdb的命令开始调试程序了,gdb的命令可以使用help命令来查看,如下所示: /home/hchen> g ...

  7. Java备份文件

    文件名后面补时间: public static void initFile(String sPath) { SimpleDateFormat df = new SimpleDateFormat(&qu ...

  8. Flask与WSGI

    刚开始接触到python及Flask框架时,总是会听到 wsgi等等相关的名词,以及 项目部署时会用到nginx+gunicorn等等,但是对于一个请求从 nignx到gunicorn再到falsk框 ...

  9. 1816647 - Error "Data file of SAP Note is incomplete" uploading a note in SNOTE

    ymptom When uploading an SAP Note in transaction SNOTE you receive the error "Data file of SAP ...

  10. leetcode494

    public class Solution { public int FindTargetSumWays(int[] nums, int S) { Queue<int> Q = new Q ...