|
cloudgamer的blog：http://cloudgamer.cnblogs.com/
Flash做動畫時會用到Tween類，利用它可以做很多動畫效果，例如緩動、彈簧等等。我這里要教大家的是怎么利用flash的Tween類的算法，來做js的Tween算法，并利用它做一些簡單的緩動效果。
完整實例下載
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
效果說明
首先大家到這里下載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：指數(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（當前時間）；
- 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來做一些緩動效果了。
先通過上面的坐標實例說一下算法原理：
x軸是時間，y軸是當前值，b是y軸的初始值，x軸的初始值是0，t是當前時間。當t（x軸）逐漸增加到達d時，當前值（y軸）會到達目標值（b+c）。
想詳細理解的話可以找資料看看吧（貌似跟數(shù)學關系比較大）。
下面就介紹如何使用這個Tween了，首先b、c、d三個參數(shù)（即初始值，變化量，持續(xù)時間）在緩動開始前，是需要先確定好的。
舉一個簡單的例子，一個div要向右緩動，left初始值是50，那么b就是50，要向右移動100，那c就是100，如果知道的是目標值，例如要向右移動到150，那就把目標值150減初始值b就是變化量c了。
至于d的設置就比較靈活，只要符合t是從0向d遞增（或遞減）就可以了。
d跟步長配合使用來設置持續(xù)時間，例如d設置為100，如果設置步長是1，那么從0到100就有100步，即分100次來完成這個過程，步數(shù)越多那么持續(xù)時間就越長。
至于t的變化相當于時間的變化，一般是均勻變化的，每次變化都增加一個步長，當t從0遞增（或遞減）到d時，緩動就結束了。
要注意的是t是從0開始的，設置步長時必須確定t確實能到達d，如果上面的步長是3，那么t就永遠都到不了d了。更好的處理是當t等于或超過d之后，就停止定時器并設置當前值為目標值。
了解了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)不同的緩動，只需要使用對應的Tween算法就行了，以前看來遙不可及的效果，現(xiàn)在這么容易就實現(xiàn)了（當然那些算法才是最難的地方）。
這樣關于緩動的效果就介紹完了，但其實遠遠不止這些，我們還可以自己定義一些算法，發(fā)揮想象力，做一些好玩的效果。
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：藍色理想
責任編輯：bluehearts
上一頁 下一頁 JavaScript Tween算法及緩動效果 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 JavaScript Tween算法及緩動效果 [1]
第 2 頁 
