我這里要教大家的是怎么利用flash的Tween類的算法，來做js的Tween算法，并利用它做一些簡單的緩動效果。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執行]
效果說明
首先大家到這里下載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是無緩動效果，沒有以上效果。
然后看看里面的算法，以Quadratic的easeOut為例：
static function easeOut (t:Number, b:Number, c:Number, d:Number):Number {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
這是as代碼，四個參數分別是：
t：current time（當前時間）；
b：beginning value（初始值）；
c： change in value（變化量）；
d：duration（持續時間）。
ps：Elastic和Back有其他可選參數，里面都有說明。
那如何在js中利用這些算法呢？可以看到，雖然是as代碼，但里面的程序是可以直接放在js里使用的。
我們可以定義一個類，把它這部分放在里面：
var Tween = {
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
}
}
這樣，就可以用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算法。那么可以用以下程序實現緩動：
var b=50,c=100,d=100,t=0;
function Run(){
div.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px";
if(t<d){ t++; setTimeout(Run, 10); }
}
Run();
一個簡單的緩動效果就實現了，要實現不同的緩動，只需要使用對應的Tween算法就行了，以前看來遙不可及的效果，現在這么容易就實現了（當然那些算法才是最難的地方）。
這樣關于緩動的效果就介紹完了，但其實遠遠不止這些，我們還可以自己定義一些算法，發揮想象力，做一些好玩的效果。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執行]
12下一頁閱讀全文
