使用該程序能實(shí)現(xiàn)很多常見(jiàn)的動(dòng)畫(huà)特效，包括大小變換、位置變換、漸顯漸隱等等。
程序說(shuō)明： 漸變效果的原理就是利用定時(shí)器不斷設(shè)置值，如果要減速效果就設(shè)置一個(gè)步長(zhǎng)（詳細(xì)看JavaScript 彈簧效果） 。
這里只是把能漸變的屬性（透明度、寬、高、left、top）整合在一起，使用相同的漸變級(jí)數(shù)（Step）使?jié)u變同步，形成多個(gè)屬性同時(shí)漸變的效果。

下面說(shuō)說(shuō)有用的地方：
【最終樣式】
在JavaScript 圖片切割效果的邊寬獲取中也說(shuō)到了最終樣式，在使用offset獲取的數(shù)據(jù)設(shè)置寬度高度的時(shí)候，必須先減去最終樣式中的邊框?qū)挾取?
在這里我使用了muxrwc的在FF下實(shí)現(xiàn)currentStyle方法，這樣在ff和ie都可以從currentStyle獲取最終樣式了：

使用這個(gè)獲取邊框?qū)挾龋?

【寬度或高度優(yōu)先】
寬度或高度優(yōu)先其實(shí)就是先執(zhí)行其中一個(gè)漸變，在完成后再執(zhí)行另一個(gè)漸變。
漸變程序中在執(zhí)行完一次漸變之后會(huì)返回一個(gè)bool值表示是否漸變完成，利用這個(gè)可以這樣：

由于&&的特性，當(dāng)this.SetWidth()返回true時(shí)才會(huì)去執(zhí)行this.SetHeight()，這也是不錯(cuò)的技巧。
同時(shí)為了同步漸變，另外的漸變使用了兩倍的步長(zhǎng)： 

這樣就能做出寬度或高度優(yōu)先的效果了。

【定點(diǎn)漸變】
先說(shuō)說(shuō)原理，例如以寬度中點(diǎn)為參照點(diǎn)，可以想象如果寬度減少n，那只要left相對(duì)增加n*0.5（即n/2），
那么就可以做出以中點(diǎn)為中心變換的效果（當(dāng)然要先把變換對(duì)象設(shè)為相對(duì)或絕對(duì)定位）。
那這個(gè)“0.5”怎么來(lái)的呢？有點(diǎn)數(shù)理知識(shí)應(yīng)該知道就是漸變對(duì)象左邊到變換點(diǎn)跟漸變對(duì)象總寬度的比
程序里用Width.pos保存這個(gè)值，在變換前先計(jì)算好變換點(diǎn)的位置：

this._x = this._obj.offsetLeft + this._obj.offsetWidth * this.Width.pos;
每次變換都根據(jù)這個(gè)位置和寬度來(lái)重新設(shè)置left：

this._obj.style.left = this._x - this._obj.offsetWidth * this.Width.pos + "px";

可能有人會(huì)說(shuō)直接在原有l(wèi)eft基礎(chǔ)上加上變換寬度*Width.pos不是一樣嗎？
但問(wèn)題是經(jīng)過(guò)多次的變換計(jì)算（到達(dá)目標(biāo)值前會(huì)有多次計(jì)算）之后得到的值已經(jīng)不準(zhǔn)確了。
因?yàn)樵谧儞Q計(jì)算過(guò)程中很多小數(shù)會(huì)被忽略，隨著計(jì)算次數(shù)增多結(jié)果的出入也越大，
所以先定好變換位置參照值（_x），這樣不論經(jīng)過(guò)多少次計(jì)算變換位置都不會(huì)走位了。

同理只要設(shè)置不同的Width.pos（包括負(fù)數(shù)和大于1的數(shù)）和Height.pos就可以以任意點(diǎn)為中心漸變了。

還有就是程序的設(shè)計(jì)也花了不少心思，為了提高整合度，做了一個(gè)FadeStruct的結(jié)構(gòu)，其中run、start、end、target屬性分別是是否漸變、開(kāi)始值、結(jié)束值、目標(biāo)值。
用了兩次的Object.extend來(lái)設(shè)置默認(rèn)值，詳細(xì)可以看程序。

使用說(shuō)明：

必要的參數(shù)只有一個(gè)，就是漸變對(duì)象，不過(guò)只有漸變對(duì)象是沒(méi)有效果的，必須設(shè)置其他屬性：
Opacity:透明漸變參數(shù)
Height:高度漸變參數(shù)
Width:寬度漸變參數(shù)
Top:Top漸變參數(shù)
Left:Left漸變參數(shù)
Step:10,//變化率
Time:10,//變化間隔
Mode:"both",//漸變順序
Show:false,//是否默認(rèn)打開(kāi)狀態(tài)
onFinish:function(){}//完成時(shí)執(zhí)行

其中Opacity、Height、Width、Top、Left比較特別，是FadeStruct結(jié)構(gòu)

例子里實(shí)例化這個(gè)對(duì)象：

設(shè)置run為true就表示開(kāi)啟這個(gè)變換，start和end是開(kāi)始和結(jié)束值，pos是Height和Width特有的變換位置屬性。

更詳細(xì)的應(yīng)用可以看實(shí)例。

最新評(píng)論