Dojo1.7動畫特效詳解

在本教程中我們將會探索Dojo1.7工具包提供的JavaScript特效，這些特效將給你的頁面和網站創造酷炫的效果！
本文由Oliver翻譯自： Dojo Effects本文是對dojo1.6同名教程的更新，並使用了1.7版中最新的寫法。在翻譯過程中參考了1.6版的譯文：dojo 1.6 官方教程： 手把手教你建立HTML5 JavaScript 動畫特效引言在前面的一系列教程中，我們已經學習了如何使用並操作DOM節點，處理DOM事件。但是當我們在對DOM節點進行操作時，有些轉換會顯得突兀：例如刪除一個節點，在使用者看來它就會在頁面上突然消失，有時這種突然變化可能會誤導使用者。使用Dojo提供的標準特效工具，我們可以構建出更加連貫的使用者體驗，並且讓我們的應用程式顯得更加精緻和完美。如果進一步使用dojo/_base/fx和dojo/fx包裡的更多功能，我們就能夠把一系列特效串聯起來，創造出非常酷的動態使用者體驗。註：Dojo1.7包含了兩個fx模組：dojo/_base/fx 和 dojo/fx

• dojo/_base/fx 提供了一些最基本的特效方法，包括：animateProperty, anim, fadeIn,和fadeOut。
• dojo/fx 提供了更多進階特效，包括：chain, combine, wipeIn, wipeOut和slideTo

（譯者註：Dojo1.7的新寫法要求明確地匯入每個模組，包括Dojo base中的基本模組，而這些模組在之前的版本中都是預設載入的，因此在使用時要特別注意）淡入淡出特效 Fading最常見的一種特效就是DOM節點的淡入與淡出。這個效果在網頁上會經常用到，因此dojo把它包含在Dojo的基礎包中。我們可以使用這個效果讓節點在頁面的出現和消失顯得連續和平滑。 下面是使用dojo建立淡入淡出效果的範例程式碼：

<button id="fadeOutButton">Fade block out</button><button id="fadeInButton">Fade block in</button> <div id="fadeTarget" class="red-block">    A red block</div><script>    require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {        var fadeOutButton = dom.byId("fadeOutButton"),            fadeInButton = dom.byId("fadeInButton"),            fadeTarget = dom.byId("fadeTarget");         on(fadeOutButton, "click", function(evt){            fx.fadeOut({ node: fadeTarget }).play();        });        on(fadeInButton, "click", function(evt){            fx.fadeIn({ node: fadeTarget }).play();        });    });</script>

Dojo裡所有的動畫特效函數都只接受一個參數對象，該參數對象包含了一系列屬性來設定所需動畫效果。其中 最重要的屬性之一就是 node。 node屬性值是一個DOM節點或者是一個DOM 節點的ID （字串）。 另一個參數 duration，則指定了這個效果的播放要持續的時間，單位是毫秒。如果不指定duration，則預設的播放時間是350毫秒。當然不同的動畫效果有不同的參數，不過對於淡入淡出特效而言，這兩個參數就足夠了。 Dojo的動畫特效函數傳回值是一個dojo.Animation 對象。這個對象有幾個方法: play, pause, stop, status 和gotoPercent 從名字可以看出這幾個方法是用來控制動畫效果的播放的。 動畫對象剛建立時並不會立即播放，需要調用play方法才開始播放。查看樣本
擦除特效 Wiping

另一種常見特效是擦除效果: 它實際上是指改變一個節點的高度，而讓其內容逐漸顯示或者消失。效果有點類似與雨刷在擋風玻璃上划過留下的痕迹。擦除特效可以用於建立頁面的下拉效果，尤其是當頁面上有一些不常用的內容時。當然你也可能僅僅是覺得擦除比淡出好看。

請看下面的範例程式碼：

<button id="wipeOutButton">Wipe block out</button><button id="wipeInButton">Wipe block in</button> <div id="wipeTarget" class="red-block wipe">    A red block</div><script>    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {        var wipeOutButton = dom.byId("wipeOutButton"),            wipeInButton = dom.byId("wipeInButton"),            wipeTarget = dom.byId("wipeTarget");         on(wipeOutButton, "click", function(evt){            fx.wipeOut({ node: wipeTarget }).play();        });        on(wipeInButton, "click", function(evt){            fx.wipeIn({ node: wipeTarget }).play();        });    });</script>

和fadeIn/fadeOut不同，使用擦除函數需要引用的是dojo/fx包。另一個需要注意的是我們在這個例子裡給目標節點“wipeTarget" 增加了一個css類wipe, 這個類設定了節點的height:auto， 這是因為wipeIn函數的效果是從節點的現有高度變化到其自然高度(即height:auto)。查看樣本
滑動特效 Sliding前面我們看到了淡入淡出和擦除效果，這兩個特效都不能改變節點在頁面上的位置。如果想要節點滑動起來，那麼就要使用fx.slideTo 。滑動效果可以創造一種動態感，有時也用來表示某種載入進度。dojo.fx.slideTo函數可以在參數指定節點的目標位置（頁面上的left和top位置，以像素px為單位） 並把這個節點滑動到目標位置。

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide">    A red block</div><script>    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {        var slideAwayButton = dom.byId("slideAwayButton"),            slideBackButton = dom.byId("slideBackButton"),            slideTarget = dom.byId("slideTarget");         on(slideAwayButton, "click", function(evt){            fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();        });        on(slideBackButton, "click", function(evt){            fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();        });    });</script>

查看樣本

動畫事件 Animation Events前面我們提到過，Dojo裡的所有的動畫特效函數都會返回一個dojo.Animation對象。這個對象不僅提供了方法控制動畫的播放暫停，同時還提供了一系列的事件供我們監聽，從而使我們可以在動畫播放前，播放中，播放後做出不同的響應動作。最重要也是最常用的兩個事件是：beforeBegin 和 onEnd。
下面我們看一段使用動畫事件的範例程式碼：

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide">    A red block</div><script>    require(["dojo/fx", "dojo/on", "dojo/dom-style", "dojo/dom", "dojo/domReady!"], function(fx, on, style, dom) {                 var slideAwayButton = dom.byId("slideAwayButton"),            slideBackButton = dom.byId("slideBackButton"),            slideTarget = dom.byId("slideTarget");                         on(slideAwayButton, "click", function(evt){                // 注意beforeBegin是作為Animation對象的參數直接傳給slideTo函數的，                // 而不是使用connect串連。這保證了我們的邏輯在其他beforeBegin邏輯之前執行。                var anim = fx.slideTo({                    node: slideTarget,                    left: "200",                    top: "200",                    beforeBegin: function(){                                                 console.warn("slide target is: ", slideTarget);                                                 style.set(slideTarget, {                            left: "0px",                            top: "100px"                        });                    }                });                 // 當然我們也可以像beforeBegin一樣把這個處理邏輯以onEnd的名字傳給slideTo函數，                // 但既然一個簡單的connect串連就能解決問題，所以……                     //（譯者註：這種做法更符合事件的特點，即當事件觸發之後才執行使用者邏輯）                on(anim, "End", function(){                    style.set(slideTarget, {                        backgroundColor: "blue"                    });                }, true);                 // 千萬別忘了啟動這個動畫特效！                anim.play();            });             on(slideBackButton, "click", function(evt){                var anim = fx.slideTo({                    node: slideTarget,                    left: "0",                    top: "100",                    beforeBegin: function(){                                                 style.set(slideTarget, {                            left: "200px",                            top: "200px"                        });                    }                });                 on(anim, "End", function(){                    style.set(slideTarget, {                        backgroundColor: "red"                    });                }, true);                 anim.play();            });    });</script>

這段範例程式碼裡我們注意到添加beforeBegin 和onEnd （譯者註：在使用1.7的新函數on時需要省略事件名首碼的"on"，這和addEventListener的用法保持了一致）這兩個事件的回調方法的方式不太一樣。beforeBegin 的處理方法直接作為參數傳遞給了slideTo函數。這是因為對某些動畫特效beforeBegin處理函數是在對象建立時串連的，如果我們通過on來串連我們的beforeBegin處理函數，則我們的處理函數會在該動畫自己的beforeBegin處理函數之後被調用。因此作為參數傳入的方法保證了我們的處理函數可以被最先執行。查看樣本
串聯動畫 Chaining如果我們想要連續播放多個動畫效果該怎麼做呢？我們可以利用剛才提到的End事件，在一個特效結束時來啟動另一個新效果，但是這樣顯然不太方便。好在dojo/fx模組為這一類常見的需求提供了一組非常方便的函數，使多個特效能連續播放或者同時播放。這些方法中的每一個都返回一個新的dojo.Animation對象，其中包含一組能描述整個動畫序列的事件和方法。我們先來看一下fx.chain是如何讓動畫特效一個接一個（串聯）播放的：

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide chain">    A red block</div><script>    require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {                 var slideAwayButton = dom.byId("slideAwayButton"),            slideBackButton = dom.byId("slideBackButton"),            slideTarget = dom.byId("slideTarget");                     // 設定一些click事件處理函數來播放我們的串聯動畫        on(slideAwayButton, "click", function(evt){            fx.chain([                baseFx.fadeIn({ node: slideTarget }),                fx.slideTo({ node: slideTarget, left: "200", top: "200" }),                baseFx.fadeOut({ node: slideTarget })            ]).play();        });        on(slideBackButton, "click", function(evt){            fx.chain([                baseFx.fadeIn({ node: slideTarget }),                fx.slideTo({ node: slideTarget, left: "0", top: "100" }),                baseFx.fadeOut({ node: slideTarget })            ]).play();        });             });</script>

如您所見，我們在調用fx.chain的時候直接傳入了一個特效數組，並對該方法所返回的dojo.Animation對象調用了play方法來啟動整個特效鏈。現在我們不需要逐個啟動特效了，fx.chain已經為我們解決了問題。查看樣本
組合動畫 Combiningdojo/fx提供的另一個方便的方法combine能夠同時啟動多個動畫特效。其返回的dojo.Animation對象將在耗時最長的動畫特效結束後觸發onEnd事件。讓我們來看另一個例子：

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide chain">    A red block</div><script>    require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(baseFx, fx, on, dom) {                 var slideAwayButton = dom.byId("slideAwayButton"),            slideBackButton = dom.byId("slideBackButton"),            slideTarget = dom.byId("slideTarget");         // 設定一些click事件處理函數來播放我們的組合動畫        on(slideAwayButton, "click", function(evt){            fx.combine([                baseFx.fadeIn({ node: slideTarget }),                fx.slideTo({ node: slideTarget, left: "200", top: "200" })            ]).play();        });        on(slideBackButton, "click", function(evt){            fx.combine([                fx.slideTo({ node: slideTarget, left: "0", top: "100" }),                baseFx.fadeOut({ node: slideTarget })            ]).play();        });             });</script>

在這個例子中，淡入和滑動特效並不是依次播放，而是同時發生的。通過使用chain和combine，我們可以用幾種簡單效果組合出很不錯的動畫特效。同時chain和combine的傳回值仍然是一個animation對象，也就是說它們還可以被進一步地串聯、組合，從而可以創造出非常精巧複雜的效果。查看樣本
結語使用Dojo的特效方法，你可以快速的給頁面加上有趣的動畫效果。dojo/_base/fx模組中包含了淡入淡出方法fadeIn和fadeOut，而通過dojo/fx模組你還可以使用擦除和滑動等許多功能強大的特效。另外，有了chain和combine 這兩個方法，就能方便快捷地構建出更複雜、更進階的動畫效果。
當然如果你還想更進一步的控制動畫的效果，例如，像wipeOut一樣調整某個DOM節點的高度，但是又不把它完全縮減到0（完全擦除），或者通過動畫來調整背景色的漸層？ Dojo提供了一個更加通用和強大的dojo.animateProperty對象來實現。 我們會在未來的教程中詳細介紹。