我這里要教大家的是怎么利用flash的Tween類(lèi)的算法，來(lái)做js的Tween算法，并利用它做一些簡(jiǎn)單的緩動(dòng)效果。

效果說(shuō)明

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

Linear：無(wú)緩動(dòng)效果；
Quadratic：二次方的緩動(dòng)（t^2）；
Cubic：三次方的緩動(dòng)（t^3）；
Quartic：四次方的緩動(dòng)（t^4）；
Quintic：五次方的緩動(dòng)（t^5）；
Sinusoidal：正弦曲線的緩動(dòng)（sin(t)）；
Exponential：指數(shù)曲線的緩動(dòng)（2^t）；
Circular：圓形曲線的緩動(dòng)（sqrt(1-t^2)）；
Elastic：指數(shù)衰減的正弦曲線緩動(dòng)；
Back：超過(guò)范圍的三次方緩動(dòng)（(s+1)*t^3 - s*t^2）；
Bounce：指數(shù)衰減的反彈緩動(dòng)。
ps：以上都是自己的爛翻譯，希望各位修正。

每個(gè)效果都分三個(gè)緩動(dòng)方式（方法），分別是：

easeIn：從0開(kāi)始加速的緩動(dòng)；
easeOut：減速到0的緩動(dòng)；
easeInOut：前半段從0開(kāi)始加速，后半段減速到0的緩動(dòng)。
其中Linear是無(wú)緩動(dòng)效果，沒(méi)有以上效果。

然后看看里面的算法，以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代碼，四個(gè)參數(shù)分別是：

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

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

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

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

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

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

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

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

最新評(píng)論