正文

tween缓动动画(代码片段)

jacksplwxy  jacksplwxy  2023-01-20  672

关键词：

在讲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	跳动缓动

window.requestanimationframe与tween.js配合使用实现动画缓动效果

window.requestAnimationFrame概述window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。注意: 如果想得到连... 查看详情

利用tween.js算法生成缓动效果

在讲tween类之前，不得不提的是贝塞尔曲线了。首先，贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线。它在作图工具或动画中中运用得比较多，例如PS中的钢笔工具，firework中的画笔等等。无论运用在哪里，它... 查看详情

scssmixin用于缓动动画(代码片段)

查看详情

定时器缓动动画(代码片段)

定时器缓动动画公式：初始值+=(终止值-初始值)×缓动系数<!DOCTYPEhtml><html><head><meatcharset="utf-8"><title>缓动动画</title>　<style>*padding:0;margin:0;bodybackground-color:#000;#btn 查看详情

javaandroid缓动功能。动画集合，有助于简化动画。(代码片段)

查看详情

2021-09-25wpf上位机44-缓动动画(代码片段)

缓动动画1、EasingFunctionElasticEase、BounceEase、BackEase、CircleEase、CubicEase、ElasticEase、ExponentialEase、PowerEaseQuadraticEase、QuarticEase、QuinticEase、SineEase2、缓动自定义继承自EasingFunctionBase重载EaseCore()、Cre 查看详情

缓动动画多个目标值之间移动(代码片段)

效果：代码：1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>缓动动画</title>6<style>7*8margin:0;9padding:0;1011div12position:absolute;13left:0;14 查看详情

qt炫酷动画6.qeasingcurve缓动曲线类(代码片段)

QEasingCurve描述缓动曲线描述了一个函数，该函数控制0和1之间的插值速度应该如何。缓动曲线允许从一个值到另一个值的过渡看起来比简单的恒定速度所允许的更自然。QEasingCurve类通常与QVariantAnimation和QPropertyAnimation类一起使用... 查看详情

threejs基础代码段tweenjs补间动画(代码片段)

一、Tweenjs是什么？ tween.js是一款可生成平滑动画效果的js动画库,只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画... 查看详情

as2tween缓动

stopTween.stopTween("_x");startTween(viewMc["Masked"],"_x",null,now_x,nowIndex*pageWidth,0.3,true);privatefunctionstartTween(taget:MovieClip,r:String,math:Function,s:Number,e:Number,t:Number,tf:Boolea 查看详情

js---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数(代码片段)

封装缓动（变速）动画函数---增加任意多个属性&增加回调函数回掉函数fn，在所有元素到达目的位置后，判断是否传入一个函数，有就调用if(fn)fn();这样一次点击，产生多个动画<!DOCTYPEhtml><htmllang="en"><head><... 查看详情

qt炫酷动画6.qeasingcurve缓动曲线类(代码片段)

runaction旋转_使用cc.tween(缓动系统)代替runaction

...catednow,pleaseusecc.TweenActioninstead。这是开发者建议使用新的缓动系统来代替原本的Action。可以选择替换,但不替换实际上也不会对项目造成什么影响,Action系统估计在很长的时间内不会移除。ca57ab27dc1ec59d71010263ed33021d.png如果你查看详情

js缓动动画原理(代码片段)

...时器clearInterval(obj.timer);obj.timer=setInterval(function()//设置缓动动画公式：目标距离-现在的距离/10;//给步长取整当step大于0的时候向上取整，负数的时候向下取整varstep=(distance-obj.offsetLeft)/10;//判断数据正负，利用math... 查看详情

关于tween的chain方法由于浅拷贝出现不能启用一个tween的bug(代码片段)

昨天由于版本升级把tween18.6.0升级到18.6.4结果封装的动画无法使用，究其原因是为了浅拷贝的问题出现问题的代码示例：this.tween=newTWEEN.Tween(this.startParms).to(this.targetParms,options.duartion);this.tween.easing(TWEEN.Easing.Linear.None);thi... 查看详情

关于缓动动画函数的封装(代码片段)

?缓动动画函数 ·之前我在博客上写过匀速的动画函数：https://www.cnblogs.com/Lzxgg-xl/p/10227127.html·与匀速的相比有相同的地方也有不同的地方我在这里就简单的写一遍　　一.首先还是一样，因为它是个函数体我们要传参... 查看详情

h5扇形(代码片段)

...ss3动画有局限性，比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等。requestAnimationFrame()的优势它告诉浏览器某些JavaScript代码将要执行动画，浏览器可以再运行某些代码后进行适当的优化，十分精确... 查看详情