我這里要教大家的是怎么利用flash的Tween類的算法，來做js的Tween算法，并利用它做一些簡單的緩動效果。

效果說明

首先大家到這里下載flash的as腳本（建議看看這里的demo），1.0和2.0都可以（里面的算法都一樣）。
例如打開2.0的可以看到幾個as文件，每個文件對應(yīng)一個Tween效果，分別有（參考里面的說明）：

Linear：無緩動效果；
Quadratic：二次方的緩動（t^2）；
Cubic：三次方的緩動（t^3）；
Quartic：四次方的緩動（t^4）；
Quintic：五次方的緩動（t^5）；
Sinusoidal：正弦曲線的緩動（sin(t)）；
Exponential：指數(shù)曲線的緩動（2^t）；
Circular：圓形曲線的緩動（sqrt(1-t^2)）；
Elastic：指數(shù)衰減的正弦曲線緩動；
Back：超過范圍的三次方緩動（(s+1)*t^3 - s*t^2）；
Bounce：指數(shù)衰減的反彈緩動。
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代碼，四個參數(shù)分別是：

t：current time（當(dāng)前時間）；
b：beginning value（初始值）；
c： change in value（變化量）；
d：duration（持續(xù)時間）。
ps：Elastic和Back有其他可選參數(shù)，里面都有說明。

那如何在js中利用這些算法呢？可以看到，雖然是as代碼，但里面的程序是可以直接放在js里使用的。
我們可以定義一個類，把它這部分放在里面：

var Tween = {
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
}
}
這樣，就可以用Tween.Quad.easeOut取得這個算法了，其他算法也一樣處理就行了。

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

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

了解了Tween的使用后就可以實現(xiàn)動畫效果了。繼續(xù)上面的例子，已經(jīng)確定b是50，c是100，d是100，步長是1，使用Tween.Quad.easeOut算法。那么可以用以下程序?qū)崿F(xiàn)緩動：

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();
一個簡單的緩動效果就實現(xiàn)了，要實現(xiàn)不同的緩動，只需要使用對應(yīng)的Tween算法就行了，以前看來遙不可及的效果，現(xiàn)在這么容易就實現(xiàn)了（當(dāng)然那些算法才是最難的地方）。

這樣關(guān)于緩動的效果就介紹完了，但其實遠(yuǎn)遠(yuǎn)不止這些，我們還可以自己定義一些算法，發(fā)揮想象力，做一些好玩的效果。

最新評論