Tween算法

原創 zhanfeng0102 2018-09-11 02:47

博客園Tween算法網址：http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html

效果說明

首先大家到這裏下載flash的as腳本（建議看看這裏的demo），1.0和2.0都可以（裏面的算法都一樣）。
例如打開2.0的可以看到幾個as文件，每個文件對應一個Tween效果，分別有（參考裏面的說明）：
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是無緩動效果，沒有以上效果。

然後看看裏面的算法，以Quad.as的easeOut爲例：

  1. static function easeOut (t:Number, b:Number, c:Number, d:Number):Number { 
  2.     return -c *(t/=d)*(t-2) + b; 
  3. } 
這是as代碼，四個參數分別是：
t: current time（當前時間）；
b: beginning value（初始值）；
c: change in value（變化量）；
d: duration（持續時間）。
ps：Elastic和Back有其他可選參數，裏面都有說明。

那如何在js中利用這些算法呢？可以看到，雖然是as代碼，但裏面的程序是可以直接放在js裏使用的。
我們可以定義一個類，把它這部分放在裏面
 
  1. var Tween = { 
  2.     Quad: { 
  3.         easeOut: function(t,b,c,d){ 
  4.             return -c *(t/=d)*(t-2) + b; 
  5.         } 
  6.     } 
  7. } 
這樣，就可以用Tween.Quad.easeOut取得這個算法了，其他算法也一樣處理就行了。

接下來就可以利用這個js的Tween來做一些緩動效果了。
先通過上面的座標實例說一下算法原理：
x軸是時間，y軸是當前值，b是y軸的初始值，x軸的初始值是0，t是當前時間。當t（x軸）逐漸增加到達d時，當前值（y軸）會到達目標值（b+c）。
想詳細理解的話可以找資料看看吧（貌似跟數學關係比較大）。

下面就介紹如何使用這個Tween了，首先b、c、d三個參數（即初始值，變化量，持續時間）在緩動開始前，是需要先確定好的。
舉一個簡單的例子，一個div要向右緩動，left初始值是50，那麼b就是50，要向右移動100，那c就是100，如果知道的是目標值，例如要向右移動到150，那就把目標值150減初始值b就是變化量c了。
至於d的設置就比較靈活，只要符合t是從0向d遞增（或遞減）就可以了。
d跟步長配合使用來設置持續時間，例如d設置爲100，如果設置步長是1，那麼從0到100就有100步，即分100次來完成這個過程，步數越多那麼持續時間就越長。
至於t的變化相當於時間的變化，一般是均勻變化的，每次變化都增加一個步長，當t從0遞增（或遞減）到d時，緩動就結束了。
要注意的是t是從0開始的，設置步長時必須確定t確實能到達d，如果上面的步長是3，那麼t就永遠都到不了d了。更好的處理是當t等於或超過d之後，就停止定時器並設置當前值爲目標值。

瞭解了Tween的使用後就可以實現動畫效果了。繼續上面的例子，已經確定b是50，c是100，d是100，步長是1，使用Tween.Quad.easeOut算法。那麼可以用以下程序實現緩動：
 
  1. var b=50,c=100,d=100,t=0; 
  2. function Run(){ 
  3.     div.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px"; 
  4.     if(t<d){ t++; setTimeout(Run, 10); } 
  5. } 
  6. Run(); 
一個簡單的緩動效果就實現了，要實現不同的緩動，只需要使用對應的Tween算法就行了，以前看來遙不可及的效果，現在這麼容易就實現了（當然那些算法纔是最難的地方）。
完整的Tween:
 
  1. var Tween = { 
  2.     Linear: function(t,b,c,d){ return c*t/d + b; }, 
  3.     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.     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.     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.     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.     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.     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.     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.     Elastic: { 
  89.         easeIn: function(t,b,c,d,a,p){ 
  90.             if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3; 
  91.             if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 
  92.             else var s = p/(2*Math.PI) * Math.asin (c/a); 
  93.             return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
  94.         }, 
  95.         easeOut: function(t,b,c,d,a,p){ 
  96.             if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3; 
  97.             if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 
  98.             else var s = p/(2*Math.PI) * Math.asin (c/a); 
  99.             return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); 
  100.         }, 
  101.         easeInOut: function(t,b,c,d,a,p){ 
  102.             if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5); 
  103.             if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 
  104.             else var s = p/(2*Math.PI) * Math.asin (c/a); 
  105.             if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
  106.             return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 
  107.         } 
  108.     }, 
  109.     Back: { 
  110.         easeIn: function(t,b,c,d,s){ 
  111.             if (s == undefined) s = 1.70158; 
  112.             return c*(t/=d)*t*((s+1)*t - s) + b; 
  113.         }, 
  114.         easeOut: function(t,b,c,d,s){ 
  115.             if (s == undefined) s = 1.70158; 
  116.             return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 
  117.         }, 
  118.         easeInOut: function(t,b,c,d,s){ 
  119.             if (s == undefined) s = 1.70158;  
  120.             if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
  121.             return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
  122.         } 
  123.     }, 
  124.     Bounce: { 
  125.         easeIn: function(t,b,c,d){ 
  126.             return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; 
  127.         }, 
  128.         easeOut: function(t,b,c,d){ 
  129.             if ((t/=d) < (1/2.75)) { 
  130.                 return c*(7.5625*t*t) + b; 
  131.             } else if (t < (2/2.75)) { 
  132.                 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
  133.             } else if (t < (2.5/2.75)) { 
  134.                 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
  135.             } else { 
  136.                 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
  137.             } 
  138.         }, 
  139.         easeInOut: function(t,b,c,d){ 
  140.             if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; 
  141.             else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; 
  142.         } 
  143.     } 
  144. } 
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

編寫自適應高度的 textarea

CarterLi 2019-02-25 00:14:46

node遇上c++ --- 愛情來的太快(一) (沒有文章)

sewerganger 2019-02-24 22:55:07

進擊webpack4 （基礎篇二：配置）

槐破夢 2019-02-24 22:55:07

《劍指offer》分解讓複雜問題更簡單

ConardLi 2019-02-24 22:55:07

ggit (git gui) --- 開發記錄 (一)

sewerganger 2019-02-24 22:45:04

搞搞, 超星爾雅；

sewerganger 2019-02-24 22:44:54

近期前端發展計劃

Ashleysweetie 2019-02-24 22:32:41

JS module的導出和導入

KevinYan 2019-02-24 21:34:55

「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

micherwa 2019-02-24 19:55:05

跨域的四種方式

上帝遺忘之子 2019-02-24 19:14:58

JS面試題之比較兩個對象是否相等？

幸福村的碼農 2019-02-24 17:35:07

JavaScript：函數防抖與函數節流

沉靜地閃光 2019-02-24 17:35:07

超級詳細的手寫webpack4配置來啓動vue2項目（附配置作用）

Sotyoyo 2019-02-24 16:44:37

QQ音樂播放地址api

要學習資料找我 2019-02-24 16:32:45

通信類

Ashleysweetie 2019-02-24 16:25:14