上篇文章介紹了及個簡單的組合效果( Combine Effect),這篇文章介紹相關的API.
由於每個Effect類都繼承於Effect.Base,在Effect.Base類中定義了上次提到的預設選項(options)和基本方法,這些基本方法是:
- beforeSetup: 建立動畫對象時調用該方法,接受當前效果對象obj為參數,所有的方法就接受這個參數.需要說明的是如果想取消當前效果,必須在boforeSetup階段進行.
- afterSetup:對象建立後調用,奇怪的是即便在beforeSetup階段取消了當前的效果,這個方法也會執行.這可能是架構不太完善的地方,後面還有例子證明.
- beforeUpdate:由於每一幀都調用update()方法,所以在每幀執行前都會調用beforeUpdate()方法.
- afterUpdate:每幀執行後調用該方法.
- beforeFinish:動畫結束之前調用該方法
- afterFinish:動畫結束調用該方法
事件執行的順序很顯然:beforeSetup->afterSetup->beforeUpdate->afterupdate[->boforeUpdate->afterUpdate->......]->boforeFinish->afterFinish.
所有方法都帶一個obj參數,這個obj參數的常用屬性和方法
- currentFrame屬性: 當前幀數
- options:當前動畫的選項
- state:目前狀態:按照執行順序分別是idle->running->finished
- effects:返回核心對象的數組:每個effect都有element屬性,可以返回作用的DOM元素
- cancel():取消當前動畫
取消當前動畫 var oAnimation=new Effect.Puff('imgPuffwithCancel',
{
beforeSetup:beforeAnimationSetupWithCancel,/**//*六個事件的執行順序*/
afterSetup:afterAnimationSetup,
beforeUpdate:beforeAnimationUpdate,
afterUpdate:afterAnimationUpdate,
beforeFinish:beforeAnimation,
afterFinish:afterAnimation,
from:0.2,
to:1
}
);
$("msg").innerHTML="";
_alert("Effect.Appear對象已經建立,目前狀態:"+oAnimation.state);}
function beforeAnimationSetupWithCancel(obj)
{
_alert("Effect.Appear對象將要安裝(Setup),現在是取消的最好時機,目前狀態:"+obj.state);
obj.cancel();
_alert("動畫取消!");
}
function afterAnimationSetup(obj)
{
/**//*即便在beforeAnimationSetup中取消了Animation該事件也會執行,但是在afterSetup時cancel不起作用*/
_alert("Effect.Appear對象已經安裝(Setup),即便取消了動畫afterSetup事件也會執行,目前狀態:"+obj.state);
}
function afterAnimation(obj)
{
_alert("Animation has been Finished!Current State:"+obj.state);
obj=obj.effects[0];/**//*注意Puff會註冊兩個Effects所以在取得動畫源是需要使用*/
_alert("currentFrame:"+obj.currentFrame+"\nfinishedOn(ms):"+obj.finishOn+"\nElement:"+obj.element.tagName+"#"+obj.element.id+"\nDuration(s):"+obj.options.duration+"\nFrom:"+obj.options.from+"\nTo:"+obj.options.to);
}
上面的例子運行效果在這裡,這個系列的所有例子都放在這個目錄下,而且在不斷的更新.如果需要原始碼,給我Email:yanghengfeng@163.com.
例子旨在說明問題,很明顯afterAnimation不會執行,還得多說幾句,對於特定的效果類,可能會由專屬的介面,在使用的時候可以參閱原始碼
