dojo 1.6 官方教程：手把手教你建立HTML5 JavaScript 動畫特效

在本教程中我們将會探索Dojo工具包提供的JavaScript特效，這些特效将給你的頁面和網站創造酷炫的效果！

難度：初學者

所需Dojo版本： 1.6

作者: Bryan Forbes

在前面的一系列教程中，我們已經學習了如何使用并操作DOM節點，處理DOM事件。但是當我們在對DOM節點進行操作時，有些轉換會顯得突兀：例如删除一個節點，在使用者看來它就會在頁面上突然消失，有時這種頁面上的突然變化會誤導使用者。使用Dojo提供的特效工具，我們可以建構出更加連貫的使用者體驗，并且讓我們的應用程式顯得更加精緻和完美。如果我們進一步使用dojo.fx包裡的更多功能，我們能夠把一系列特效串聯起來，創造出非常酷的動态使用者體驗。

漸入和漸出效果（Fade）

最常見的一種特效就是DOM節點的漸入與漸出（淡入與淡出）。這個效果在網頁上會經常用到，是以dojo把它包含Dojo的基礎包中。（譯者：表示你不需要使用dojo.require引用任何包）我們可以使用這個效果讓節點在頁面的出現和消失顯得連續和平滑。下面是使用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>
    dojo.ready(function(){
        var fadeOutButton = dojo.byId("fadeOutButton"),
            fadeInButton = dojo.byId("fadeInButton"),
            fadeTarget = dojo.byId("fadeTarget");

        dojo.connect(fadeOutButton, "onclick", function(evt){
            dojo.fadeOut({ node: fadeTarget }).play();
        });
        dojo.connect(fadeInButton, "onclick", function(evt){
            dojo.fadeIn({ node: fadeTarget }).play();
        });
    });
</script>

真正制造漸入漸出方法的代碼隻需要一行，就是dojo.fadeOut 和dojo.fadeIn。 Dojo裡所有的動畫特效函數都隻接受一個參數對象，該參數對象包含了一系列屬性來設定所需動畫效果。其中最重要的屬性之一就是 node。 node屬性值是一個DOM節點或者是一個DOM 節點的ID （字元串）。另一個參數 duration，則指定了這個效果的播放要持續的時間，機關是毫秒。如果不指定duration，則預設的播放時間是350毫秒。當然不同的動畫效果有不同的參數，不過對于淡入淡出特效而言，這兩個參數就足夠了。

Dojo的動畫特效函數傳回值是一個dojo.Animation 對象。這個對象有幾個方法: play, pause, stop, status 和gotoPercent 從名字可以看出這幾個方法是用來控制動畫效果的播放的。動畫對象剛建立時并不會立即播放，需要調用play方法才開始播放。

檢視示例：

http://dojotoolkit.org/documentation/tutorials/1.6/effects/demo/fade.html

擦除效果(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>
    // Load the dojo.fx module
    dojo.require("dojo.fx");

    // Don't forget, when using modules, wrap your code in a dojo.ready
    dojo.ready(function(){
        var wipeOutButton = dojo.byId("wipeOutButton"),
            wipeInButton = dojo.byId("wipeInButton"),
            wipeTarget = dojo.byId("wipeTarget");

        dojo.connect(wipeOutButton, "onclick", function(evt){
            dojo.fx.wipeOut({ node: wipeTarget }).play();
        });
        dojo.connect(wipeInButton, "onclick", function(evt){
            dojo.fx.wipeIn({ node: wipeTarget }).play();
        });
    });
</script>

和fadeIn fadeOut不同，使用擦除函數需要先引用dojo.fx包。另一個需要注意的是我們在這個例子裡給目标節點“wipeTarget" 增加了一個css類wipe, 這個類設定了節點的height:auto，這是因為wipeIn函數的效果是從節點的現有高度變化到其自然高度(即height:auto)

檢視示例

滑動

前面我們看到了淡入淡出和擦除效果，這兩個特效都不能改變節點在頁面上的位置。如果想要節點滑動起來，那麼就要使用dojo.fx.slideTo 。

滑動效果可以創造一種動态感，有時也用來表示某種加載進度。dojo.fx.slideTo函數可以在參數指定節點的目标位置（頁面上的left和top位置）并把這個節點滑動到目标位置。

<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>
    dojo.require("dojo.fx");

    dojo.ready(function(){
        var slideAwayButton = dojo.byId("slideAwayButton"),
            slideBackButton = dojo.byId("slideBackButton"),
            slideTarget = dojo.byId("slideTarget");

        dojo.connect(slideAwayButton, "onclick", function(evt){
            dojo.fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
        });
        dojo.connect(slideBackButton, "onclick", function(evt){
            dojo.fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
        });
    });
</script>

檢視示例: 點選打開連結

動畫事件

前面我們提到過，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>
    dojo.require("dojo.fx");

    dojo.ready(function(){
        var slideAwayButton = dojo.byId("slideAwayButton"),
            slideBackButton = dojo.byId("slideBackButton"),
            slideTarget = dojo.byId("slideTarget");

        dojo.connect(slideAwayButton, "onclick", function(evt){
            var anim = dojo.fx.slideTo({
                node: slideTarget,
                left: "200",
                top: "200",
                beforeBegin: function(){
                    dojo.style(slideTarget, {
                        left: "0px",
                        top: "100px"
                    });
                }
            });

            //在動畫播放完成後将背景色設為藍色 
            dojo.connect(anim, "onEnd", function(){
                dojo.style(slideTarget, {
                    backgroundColor: "blue"
                });
            });

            anim.play();
        });
        dojo.connect(slideBackButton, "onclick", function(evt){
            var anim = dojo.fx.slideTo({
                node: slideTarget,
                left: "0",
                top: "100",
                beforeBegin: function(){
                    dojo.style(slideTarget, {
                        left: "200px",
                        top: "200px"
                    });
                }
            });
             //在動畫播放完成後将背景色更改為紅色
             dojo.connect(anim, "onEnd", function(){
                dojo.style(slideTarget, {
                    backgroundColor: "red"
                });
            });

            anim.play();
        });
    });
</script>

這段示例代碼裡我們注意到添加beforeBegin 和onEnd 這兩個事件的回調方法的方式不太一樣。beforeBegin 的處理方法直接作為參數傳遞給了slideTo函數。而onEnd是使用dojo.connect 連接配接的。這是因為對某些動畫特效beforeBegin處理函數是在對象建立時連接配接的，如果我們通過dojo.connect 來注冊我們的beforeBegin處理函數，則我們的處理函數會在該動畫自己的beforeBegin處理函數之後被調用。是以作為參數傳入的方法保證了我們的處理函數可以被最先執行。

鍊式調用（Chaining)

Dojo 動畫特效的強大之處還在于可以使用鍊式調用将許多不同的特效串聯起來執行.實際上通過監聽onEnd事件，我們就可以做到在前一個動畫執行之後再執行另一個動畫，但是這樣并不是很友善。而使用dojo.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>
    dojo.require("dojo.fx");

    dojo.ready(function(){
        var slideAwayButton = dojo.byId("slideAwayButton"),
            slideBackButton = dojo.byId("slideBackButton"),
            slideTarget = dojo.byId("slideTarget");

        dojo.connect(slideAwayButton, "onclick", function(evt){
            dojo.fx.chain([
                dojo.fadeIn({ node: slideTarget }),
                dojo.fx.slideTo({ node: slideTarget, left: "200", top: "200" }),
                dojo.fadeOut({ node: slideTarget })
            ]).play();
        });
        dojo.connect(slideBackButton, "onclick", function(evt){
            dojo.fx.chain([
                dojo.fadeIn({ node: slideTarget }),
                dojo.fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                dojo.fadeOut({ node: slideTarget })
            ]).play();
        });
    });
</script>

從這段代碼可以看到，我們使用 dojo.fx.chain方法，傳入一個由多個動畫特效組成的數組，并在chain方法傳回的dojo.Animation對象上執行play，這一系列動畫将會逐一執行。

合并執行

chain方法使一系列動畫特效逐一執行，而dojo.fx.combine則可以讓一組動畫同時執行。在前面的例子中，是先淡入，然後滑動，最後淡出。使用combine我們可以讓這三個效果同時執行。 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>
    dojo.require("dojo.fx");

    dojo.ready(function(){
        var slideAwayButton = dojo.byId("slideAwayButton"),
            slideBackButton = dojo.byId("slideBackButton"),
            slideTarget = dojo.byId("slideTarget");

        dojo.connect(slideAwayButton, "onclick", function(evt){
            dojo.fx.combine([
                dojo.fadeIn({ node: slideTarget }),
                dojo.fx.slideTo({ node: slideTarget, left: "200", top: "200" })
            ]).play();
        });
        dojo.connect(slideBackButton, "onclick", function(evt){
            dojo.fx.combine([
                dojo.fx.slideTo({ node: slideTarget, left: "0", top: "100" }),
                dojo.fadeOut({ node: slideTarget })
            ]).play();
        });
    });
</script>

這個例子裡，我們通過combine把淡入效果和滑動效果同時執行。

通過使用chain和combine，我們可以用幾種簡單效果組合出很不錯的動畫特效。同時chain和combine的傳回值仍然是一個animation對象，也就是說它們還可以被進一步的串聯和合并，是以可以創造出非常精巧複雜的效果。

小結

使用Dojo的特效方法，你可以快速的給頁面加上有趣的動畫效果。dojo 基礎包中已經包含了淡入淡出方法dojo.fadeIn dojo.fadeOut，而通過require dojo.fx 你還可以使用擦除和滑動效果。結合chain和combine 這兩個組合方法，可以建構出進階的動畫效果。

當然如果你還想更進一步的控制動畫的效果，例如，像wipeOut一樣調整某個DOM節點的高度，但是又不把它完全縮減到0（完全擦除），或者通過動畫來調整背景色的漸變？ Dojo提供了一個更加通用和強大的dojo.animateProperty對象來實作。我們會在未來的教程中詳細介紹。

參考(譯者）

這個教程比較簡單，提供的示例也是示意性質的。下面我找了一些使用dojo.fx 做出的比較複雜比較炫的特效示例。供讀者參考：

用dojo實作的複雜文本動畫效果：

dojo 1.6 官方教程：手把手教你建立HTML5 JavaScript 動畫特效

漸入和漸出效果（Fade）

擦除效果(Wiping)

滑動

動畫事件

鍊式調用（Chaining)

合并執行

小結

參考(譯者）

繼續閱讀

HDU 4719 Oh My Holy FFF

CSU 1561 (More) Multiplication

CSU 1563 Lexicography

HDU 4721 Food and Productivity

ZOJ 1041 Transmitters

CSU 1562 Fun House

CodeChef PALPROB Palindromeness

UVA 10344- 23 out of 5

ZOJ 1104 Leaps Tall Buildings

HDU 2821 Pusher

UVA 1401 Remember the Word

ZOJ 2748 Free Kick

CSU 1567 Reverse Rot

JAVA 系列——>開發工具IntelliJ IDEA的安裝以及配置、快捷鍵IDEA 簡介

UVA 519 Puzzle (II)

磁盤結構及在Linux中的命名

dojo 1.6 官方教程： 手把手教你建立HTML5 JavaScript 動畫特效

漸入和漸出效果 （Fade）

擦除效果(Wiping)

滑動

動畫事件

鍊式調用（Chaining)

合并執行

小結

參考(譯者）

繼續閱讀

dojo 1.6 官方教程：手把手教你建立HTML5 JavaScript 動畫特效

漸入和漸出效果（Fade）