dojo/query (part 4) NodeList-fx

簡介

dojo/NodeList-fx 為 dojo/query 擴充了動畫的功能。原先 dojo 中的動畫功能分拆在 dojo/_base/fx, dojo/fx, 及 dojox/fx 三個模組裡；在 dojo/NodeList-fx 擴充模組裡則含括了大部份的功能。雖然說 dojo/query 及一系列的擴充模組有點仿效 jQuery 的用法，但因為基礎架構上的差異及呼叫函式方法的不同，在使用函式的方法上和參數的傳遞上還是有些差異的。所有 dojo/NodeList-fx 的動畫函式在呼叫後，都會回傳一個 Animation 物件，必需再鏈接 play() 函式，才會執行動畫。例如：query(".box").fadeIn().play();在執行完 play() 之後傳回的物件就不是 Animation 物件了，因此不能再鏈接動畫函式了。大多數的函式在執行時的行為都還滿容易理解，也很符合預期的情況，其中只有 wipeIn() 函式的行為頗為令人費解，和 jQuery 的 wipeIn() 行為大相逕庭。詳細研究後，在範例中另用一個方塊來展示其功能。原因是 wipeIn() 函式針對 element 的樣式 (style) 做變更，似乎又為了配合某些流覽器的行為，對 padding 屬性有特別的處理，最後使得 wipeIn(properties) 函式只能用特殊的寫法來逹到某種效果。詳細情況請參照範例程式中的寫法。

以下列出各動畫函式

fadeOut(properties)

淡出。針對透明度 (opacity) 屬性做改變，動畫結束後，opacity 屬性值為 0，該元件依舊佔據螢幕上的位置。參數 properties 是個物件，指定動畫執行時的一些條件，其物件屬性如下列所示：

delay: 設定動畫延遲多久後開始執行，單位為 ms。

duration: 設定動畫執行經過所需的時間，單位為 ms。

rate: 設定動畫畫面的間隔時間，單位為千分之一秒 (ms)，預設值為 20ms，也就是 50 frames/sec。這個預設值有點高，快得讓人看不清變化，可以設低一點。將 rate 設為 25 或 30，也就是每 25ms 或 30ms 顯示一次畫面，這樣比較看得清楚變化。

auto: 設定為 true 時，表示後面要鏈接其它的動畫函式。

fadeIn(properties): 淡入。針對透明度 (opacity) 屬性做改變，動畫結束後，opacity 屬性值為 1。

wipeOut(properties): 逐漸消失。針對元件的樣式做變更，會改變 height 和 display 的值，動畫結束後，height=auto，display=none。因為 display=none，此時元件在螢幕上不佔位置。

wipeIn(properties): 逐漸顯現。元件樣式的 position 值需設定為 absolute、 display 值需先設定為 none，如果需要 padding 值，必須在內層多加一個元件，並在內層元件中設定 padding 值。動畫結束後，height=auto、display 為預設值。wipeIn() 結束後的高度沒有辦法指定，只能是內容加上 padding 的高度。個人真的不推薦使用 dojo 中的 wipeIn() 和 wipeOut() 兩個函式，太麻煩了。

slideTo(properties): 移到螢幕上指定的絕對位置。針對 top 及 left 屬性做改變，動畫結束後，position 的值為 "absolute", top 及 left 的值為指定值。

animateProperty(properties): 指定動畫開始時及結束時之各屬性的指定值，想要創造精彩炫目的動畫，就靠這個函式了。詳情請看程式的解說。

範例

範例的圖片只顯示了範例起始的狀態。操作時，先按 FadeOut 按鈕，等方塊淡出後，再按 FadeIn 按鈕，該方塊淡入。按完 WipeOut 按鈕後，方塊會消失，此時，水平分隔線仍在原地不動，顯示出消失的方塊實際上還佔著螢幕的位置。按下 WipeIn 按鈕，則會在水平線下方顯示另一個黃色的方塊。按下 SlideTo 按鈕，則方塊會移動，之後，會同時改變其顏色及大小；這時注意一下水平分隔線的位置，因為是移動到絕對位置，此時，水平分隔線的位置依然是相對的，所以就被移到上方了。

CSS

<style>
html {
    width:100%;
    height:100%;
}
body {
    margin:0 auto;
    width:1000px;
    height:100%;
    padding-top:20px;
}
.box {
    box-sizing: border-box;
    margin:20px;
    width:200px;
    height:200px;
    border: 2px solid black;
    padding:50px;
    background-color:blue;
}
</style>

CSS 中設定類別 .box 之各樣式屬性的初始值。

HTML

<body class="claro">
    
    
    
    
    
    Demo box
    
    
        this box is used for wipe in 
    
</body>

HTML 中設定五個按鈕，分別觸動不同的動畫效果。並設定兩個方塊以展示動畫效果，其中 id="wipeInBox" 的方塊，，特別用來展示 wipeIn() 的效果。其中的 <hr> 水平分隔線用來顯示淡出的方塊依然會佔據螢幕位置。

Script

第 21~25 行綁定按鈕觸發事件時所要執行的函式。
第 29 行設定了在 2 秒後才開始執行動畫，因此按下按鈕後，要耐心等兩秒鐘，才會開始動作。
第 54~68 行是最精彩的部份，slideTo() 先將方塊移至 top=100px, left=300px 的位置，之後再用 animateProperty() 函式，經過 5 秒的時間，將背景顏色由紅色轉成綠色，在變換顏色的同時，將尺寸由 200px x 200px 縮小至 100px x 100px。
第 58 行設定各屬性若需要使用測量單位時，單位值為 "px" 這也是預設值。
第 62 行 backgroundColor 的設定值，指定了 start 和 end 兩個屬性值，因此，在動畫執行時，會先將方塊的顏色轉成紅色，最後才變成綠色。而第 63,64 行 width 和 height 屬性都只設定了一個值，此時，便以元件的現值為起始值，在此設定的值為結束值。注意第 59 行的 auto 屬性須設定為 true，否則就不能自動鏈接後繼的動畫函式了。

熊伯的外接硬碟

2016年4月12日星期二