当前位置: 首页 > 工具软件 > Tween > 使用案例 >

Tween公式

王锐
2023-12-01

Tween公式 4个参数

t:current time(当前时间)

b:beginning value(初始值)

c: change in value(变化量)

d:duration(持续时间) return (目标点)

  1 var Tween = {
  2     linear: function (t, b, c, d){  //匀速
  3         return c*t/d + b;
  4     },
  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     easeBoth: function(t, b, c, d){  //加速减速曲线
 12         if ((t/=d/2) < 1) {
 13             return c/2*t*t + b;
 14         }
 15         return -c/2 * ((--t)*(t-2) - 1) + b;
 16     },
 17     easeInStrong: function(t, b, c, d){  //加加速曲线
 18         return c*(t/=d)*t*t*t + b;
 19     },
 20     easeOutStrong: function(t, b, c, d){  //减减速曲线
 21         return -c * ((t=t/d-1)*t*t*t - 1) + b;
 22     },
 23     easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
 24         if ((t/=d/2) < 1) {
 25             return c/2*t*t*t*t + b;
 26         }
 27         return -c/2 * ((t-=2)*t*t*t - 2) + b;
 28     },
 29     elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
 30         if (t === 0) { 
 31             return b; 
 32         }
 33         if ( (t /= d) == 1 ) {
 34             return b+c; 
 35         }
 36         if (!p) {
 37             p=d*0.3; 
 38         }
 39         if (!a || a < Math.abs(c)) {
 40             a = c; 
 41             var s = p/4;
 42         } else {
 43             var s = p/(2*Math.PI) * Math.asin (c/a);
 44         }
 45         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 46     },
 47     elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
 48         if (t === 0) {
 49             return b;
 50         }
 51         if ( (t /= d) == 1 ) {
 52             return b+c;
 53         }
 54         if (!p) {
 55             p=d*0.3;
 56         }
 57         if (!a || a < Math.abs(c)) {
 58             a = c;
 59             var s = p / 4;
 60         } else {
 61             var s = p/(2*Math.PI) * Math.asin (c/a);
 62         }
 63         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 64     },    
 65     elasticBoth: function(t, b, c, d, a, p){
 66         if (t === 0) {
 67             return b;
 68         }
 69         if ( (t /= d/2) == 2 ) {
 70             return b+c;
 71         }
 72         if (!p) {
 73             p = d*(0.3*1.5);
 74         }
 75         if ( !a || a < Math.abs(c) ) {
 76             a = c; 
 77             var s = p/4;
 78         }
 79         else {
 80             var s = p/(2*Math.PI) * Math.asin (c/a);
 81         }
 82         if (t < 1) {
 83             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
 84                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 85         }
 86         return a*Math.pow(2,-10*(t-=1)) * 
 87                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
 88     },
 89     backIn: function(t, b, c, d, s){     //回退加速(回退渐入)
 90         if (typeof s == 'undefined') {
 91            s = 1.70158;
 92         }
 93         return c*(t/=d)*t*((s+1)*t - s) + b;
 94     },
 95     backOut: function(t, b, c, d, s){
 96         if (typeof s == 'undefined') {
 97             s = 3.70158;  //回缩的距离
 98         }
 99         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
100     }, 
101     backBoth: function(t, b, c, d, s){
102         if (typeof s == 'undefined') {
103             s = 1.70158; 
104         }
105         if ((t /= d/2 ) < 1) {
106             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
107         }
108         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
109     },
110     bounceIn: function(t, b, c, d){    //弹球减振(弹球渐出)
111         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
112     },       
113     bounceOut: function(t, b, c, d){
114         if ((t/=d) < (1/2.75)) {
115             return c*(7.5625*t*t) + b;
116         } else if (t < (2/2.75)) {
117             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
118         } else if (t < (2.5/2.75)) {
119             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
120         }
121         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
122     },      
123     bounceBoth: function(t, b, c, d){
124         if (t < d/2) {
125             return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
126         }
127         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
128     }
129 }

 

 类似资料: