dojo/_base/fx
簡介
dojo/_base/fx 模組是 dojo 中所有動畫模組的基礎模組，而 animateProperty()則是其中的基礎函式。animateProperty() 函式傳回一個 dojo/base/fx::Animation 物件，呼叫這個傳回物件的 play() 函式，動畫才會正式起動。在實作時，以 animateProperty() 函式傳入參數設定動畫的起始及結束時的樣式狀態及動畫執行時的一些參數，例如：動畫開始前的延遲時間、動畫執行時的歷時長度、執行的次數。。。等等； 在取得傳回的 Amination 物件後，再決定何時開始動作及如何動作。
animateProperty()
animateProperty() 傳入的參數為一個 Javascript 物件，該物件中各屬性的意義如下：
- node
- 要進行動畫的節點。可以直接傳入該元件的 id 名。
- properties
- 賦予值為 Javascript 物件，陳述進行動畫之元件的起始樣式和結束樣式。每一個樣式屬性可以只賦予一個結束值，則該樣式屬性以該元件的現有值為起始值；或給予一個 Javascript 物件，物件中包含 start 及 end 兩個屬性，各代表起始值及結束值（見程式碼）。
- delay
- 延遲時間，單位為 ms。動畫在收到 play() 指令後，會等候 delay 所設定的時間，之後才開始進行動畫。預設值為 0。
- duration
- 整個動畫進行過程所需經歷的時間，單位為 ms。預設為 350ms。
- rate
- 執行動畫時更新畫面的速度，預設值為 20。也就是 1000 ms / 20ms = 50，表示每秒鐘更新 50 次畫面。速度有點快，若改為 25，則為 1000ms / 25ms = 40； 也就是每秒鐘更新 40 次畫面。以此類推。
- curve
- 賦予值為一個包含起始值和結束值的陣列，預設值為 null。目前找不到任何相關的資料或文件說明如何使用這個參數。
- easing
- 賦予值為函式，預設值為 null。用來改變動畫執行時，在各時間點的加、減速。如要改變預設值，得自己寫函式。
- repeat
- 動畫要重複執行幾次，預設值為 0。此時會執行一次，然後停留在結束的畫面。如果設定為 1，則會執行一次，但畫面會回到起始畫面。其餘設定以此類推，執行完次數後，都會回到起始畫面。
- beforeBegin(arg)
- 在動畫開始前呼叫。參數 arg 為一 DOM 元件，樣式屬性含有起始值。
- onBegin(arg)
- 在動畫開始時呼叫。呼叫的時機及傳入的參數和 onPlay() 似乎都一樣，不知作用何在？根據原始碼的註解，作者好像也有這樣的疑問。參數 arg 為一物件，內含所有要改變之樣式屬性的起始值。
- onPlay(arg)
- 動畫執行時呼叫一次，參數 arg 為一物件，內含所有要改變之樣式屬性的起始值。
- onAnimate(arg)
- 動畫執行過程中，每次有改變樣式的屬性後都會呼叫一次。參數 arg 為一物件，內含所有要改變之樣式屬性改變後的值。
- onPause(arg)
- 動畫暫停時呼叫。參數 arg 為一物件，內含所有要改變之樣式屬性的現值。
- onStop(arg)
- 動畫中止時呼叫。參數 arg 為一物件，內含所有要改變之樣式屬性的現值。
- onEnd(arg)
- 動畫結束時呼叫。參數 arg 為一 DOM 元件，樣式屬性含有結束值。
dojo/base/fx::Animation
傳回的 Animation 物件則具有以下函式：
- status()
- 傳回動畫的目前狀態。可能值為 "active", "stopped", "paused" 的字串值。
- play(delay, gotoStart)
- 開始執行動畫。如果先前的狀態為 "paused"（暫停），則由暫停處開始。如果先前狀態為 "stopped"，則重新開始。delay 為延遲多少 ms 後開始， gotoStart 如果值為 true，則重新開始； 否則從目前的畫面開始。目前的測試狀況是：只要先前的狀態是 "stopped"，一律會重新開始。 只有在先前的狀態是 "paused" 時會有差別。
- stop(gotoEnd)
- 停止動畫的執行，進入 stopped 的狀態。gotoEnd 的值為 true 時，中止動畫執行並跳到動畫的結束畫面，預設為 false，動畫停留在中止的畫面。測試結果顯示， gotoEnd 的為 true 時，動畫會停止但不會進到結束的畫面，應該是 dojo 的 bug。
- pause()
- 暫停動畫，動畫會停留在暫停時的畫面；此時如果再執行 play()，則依 play() 的 gotoStart 參數值的設定，重新開始動畫或由暫停時的畫面繼續動畫的執行。
- gotoPercent(percent, play)
- 畫面直接跳到動畫執行到 percent（百分比）時的畫面，percent 的賦予值為浮點數值 0.0 至 1.0 之間。play 值為 true 時，動畫會繼續執行，值為 false 時，則停留在執行 percent 的畫面上。這裡的行為模式也有點出人意料。如果呼叫 gotoPercent() 時動畫正在執行，也就是狀態為 "active"，而 play 值為 true 時，則動畫會立即跳至 percent 處，並繼續執行。如果 play 值為 false，則動畫會立即暫停，並停留在暫停的畫面處，直到下一次呼叫 play() 時，畫面直接跳到 percent 處並開始執行直到動畫結束。如果呼叫 gotoPercent() 時，動畫並未開始執行，即使 play 設定為 true，呼叫 gotoPercent() 也不會開始執行動畫，要等到呼叫 play() 時，才會直接跳到 percent 處並開始動畫。
範例
範例中建立四個按鈕及一個用來展示動畫的方塊，動畫執行結束時，方塊面積會變大，同時顏色會由淺綠變成深綠。四個按鈕各標示了點按後動畫會採取的動作，可以用不同的組合來查看動畫的行為。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:auto;
padding-top:20px;
}
.box {
width:200px;
height:200px;
padding:8px;
background-color:lightgreen;
}
</style>
CSS 中設定方塊的起始值。
HTML
<body class="claro">
</body>
HTML 中建立四個按鈕及一個展示動畫用的方塊。二條水平分隔線，用以顯示方塊是否佔據螢幕的位置。
Script
程式並不複雜，可以一看就懂，不多做解釋了。註解的地方可以取消註解，看看回呼函式何時被呼叫，及傳入的參數為何。
沒有留言:
張貼留言