文章出處
文章列表
'+ ''+ '
'+
'
'+
''+
'
'+ ''; // ]]>
Tween類型：
ease類型：
效果說明：
Linear：無緩動效果；
Quadratic：二次方的緩動（t^2）；
Cubic：三次方的緩動（t^3）；
Quartic：四次方的緩動（t^4）；
Quintic：五次方的緩動（t^5）；
Sinusoidal：正弦曲線的緩動（sin(t)）；
Exponential：指數曲線的緩動（2^t）；
Circular：圓形曲線的緩動（sqrt(1-t^2)）；
Elastic：指數衰減的正弦曲線緩動；
Back：超過范圍的三次方緩動（(s+1)*t^3 - s*t^2）；
Bounce：指數衰減的反彈緩動。
ps：以上都是自己的爛翻譯，希望各位修正。
每個效果都分三個緩動方式（方法），分別是：
easeIn：從0開始加速的緩動；
easeOut：減速到0的緩動；
easeInOut：前半段從0開始加速，后半段減速到0的緩動。
其中Linear是無緩動效果，沒有以上效果。
參數及使用示例：
Tween中的方法接受4個參數t,b,c,d 。返回值為計算后的當前位置。
四個參數分別是：
t: current time（當前時間）；
b: beginning value（初始值）；
c: change in value（變化量）；
d: duration（持續時間）。
比如： 希望top從100px到150px，在500ms內完成
1 var easeInQuad = function (x, t, b, c, d) { 2 return c*(t/=d)*t + b; 3 }, 4 5 var d = 500,b = 100,c = 150 - b; 6 var count = d / 20; //500毫秒分多少次執行完畢 7 setInterval(function(){ 8 var x = easeInQuad(0, d - (count-- * 20) , b, c, d); 9 //return 的結果便是每個時間片，top的值 10 }, 20); 11 //一般瀏覽器的timer最小是20（這是windows底層的CPU時間決定的！）
Tween完整算法代碼
1 export class Tween{ 2 static Linear = function (t, b, c, d) { return c * t / d + b; }; 3 static Quad = { 4 easeIn: function (t, b, c, d) { 5 return c * (t /= d) * t + b; 6 }, 7 easeOut: function (t, b, c, d) { 8 return -c * (t /= d) * (t - 2) + b; 9 }, 10 easeInOut: function (t, b, c, d) { 11 if ((t /= d / 2) < 1) return c / 2 * t * t + b; 12 return -c / 2 * ((--t) * (t - 2) - 1) + b; 13 } 14 }; 15 static Cubic = { 16 easeIn: function (t, b, c, d) { 17 return c * (t /= d) * t * t + b; 18 }, 19 easeOut: function (t, b, c, d) { 20 return c * ((t = t / d - 1) * t * t + 1) + b; 21 }, 22 easeInOut: function (t, b, c, d) { 23 if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; 24 return c / 2 * ((t -= 2) * t * t + 2) + b; 25 } 26 }; 27 static Quart = { 28 easeIn: function (t, b, c, d) { 29 return c * (t /= d) * t * t * t + b; 30 }, 31 easeOut: function (t, b, c, d) { 32 return -c * ((t = t / d - 1) * t * t * t - 1) + b; 33 }, 34 easeInOut: function (t, b, c, d) { 35 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; 36 return -c / 2 * ((t -= 2) * t * t * t - 2) + b; 37 } 38 }; 39 static Quint = { 40 easeIn: function (t, b, c, d) { 41 return c * (t /= d) * t * t * t * t + b; 42 }, 43 easeOut: function (t, b, c, d) { 44 return c * ((t = t / d - 1) * t * t * t * t + 1) + b; 45 }, 46 easeInOut: function (t, b, c, d) { 47 if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; 48 return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; 49 } 50 }; 51 static Sine = { 52 easeIn: function (t, b, c, d) { 53 return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; 54 }, 55 easeOut: function (t, b, c, d) { 56 return c * Math.sin(t / d * (Math.PI / 2)) + b; 57 }, 58 easeInOut: function (t, b, c, d) { 59 return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; 60 } 61 }; 62 static Expo = { 63 easeIn: function (t, b, c, d) { 64 return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; 65 }, 66 easeOut: function (t, b, c, d) { 67 return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; 68 }, 69 easeInOut: function (t, b, c, d) { 70 if (t == 0) return b; 71 if (t == d) return b + c; 72 if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; 73 return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; 74 } 75 }; 76 static Circ = { 77 easeIn: function (t, b, c, d) { 78 return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; 79 }, 80 easeOut: function (t, b, c, d) { 81 return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; 82 }, 83 easeInOut: function (t, b, c, d) { 84 if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; 85 return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; 86 } 87 }; 88 static Elastic = { 89 easeIn: function (t, b, c, d, a, p) { 90 var s; 91 if (t == 0) return b; 92 if ((t /= d) == 1) return b + c; 93 if (typeof p == "undefined") p = d * .3; 94 if (!a || a < Math.abs(c)) { 95 s = p / 4; 96 a = c; 97 } else { 98 s = p / (2 * Math.PI) * Math.asin(c / a); 99 } 100 return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 101 }, 102 easeOut: function (t, b, c, d, a, p) { 103 var s; 104 if (t == 0) return b; 105 if ((t /= d) == 1) return b + c; 106 if (typeof p == "undefined") p = d * .3; 107 if (!a || a < Math.abs(c)) { 108 a = c; 109 s = p / 4; 110 } else { 111 s = p / (2 * Math.PI) * Math.asin(c / a); 112 } 113 return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); 114 }, 115 easeInOut: function (t, b, c, d, a, p) { 116 var s; 117 if (t == 0) return b; 118 if ((t /= d / 2) == 2) return b + c; 119 if (typeof p == "undefined") p = d * (.3 * 1.5); 120 if (!a || a < Math.abs(c)) { 121 a = c; 122 s = p / 4; 123 } else { 124 s = p / (2 * Math.PI) * Math.asin(c / a); 125 } 126 if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; 127 return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b; 128 } 129 }; 130 static Back = { 131 easeIn: function (t, b, c, d, s) { 132 if (typeof s == "undefined") s = 1.70158; 133 return c * (t /= d) * t * ((s + 1) * t - s) + b; 134 }, 135 easeOut: function (t, b, c, d, s) { 136 if (typeof s == "undefined") s = 1.70158; 137 return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; 138 }, 139 easeInOut: function (t, b, c, d, s) { 140 if (typeof s == "undefined") s = 1.70158; 141 if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; 142 return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; 143 } 144 }; 145 static Bounce = { 146 easeIn: function (t, b, c, d) { 147 return c - Animation.Bounce.easeOut(d - t, 0, c, d) + b; 148 }, 149 easeOut: function (t, b, c, d) { 150 if ((t /= d) < (1 / 2.75)) { 151 return c * (7.5625 * t * t) + b; 152 } else if (t < (2 / 2.75)) { 153 return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; 154 } else if (t < (2.5 / 2.75)) { 155 return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; 156 } else { 157 return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; 158 } 159 }, 160 easeInOut: function (t, b, c, d) { 161 if (t < d / 2) { 162 return Animation.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; 163 } else { 164 return Animation.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; 165 } 166 } 167 } 168 }
文章列表
全站熱搜
留言列表
