1.引言

      在本篇博客中主要介紹兩個(gè)模塊的使用，1個(gè)是dojo/_base/fx,另外1個(gè)模塊是dojo/fx，這兩個(gè)模塊的作用是實(shí)現(xiàn)DOM元素的動(dòng)畫效果，通過(guò)名字我們可以看出：

• dojo/_base/fx提供1些基礎(chǔ)的動(dòng)畫效果
• dojo/fx提供1些高級(jí)的動(dòng)畫效果

接下來(lái)我們就來(lái)用1些這兩個(gè)模塊實(shí)現(xiàn)的動(dòng)畫效果

2 dojo/_base/fx實(shí)現(xiàn)動(dòng)畫效果

      在dojo/_base/fx模塊中提供了5個(gè)方法來(lái)實(shí)現(xiàn)動(dòng)畫效果：animateProperty, anim, fadeIn, fadeOut，接下來(lái)我們主要介紹1個(gè)方法animateProperty,由于當(dāng)這個(gè)方法會(huì)使用的時(shí)候，其他的方法也就會(huì)了。

2.1 使用（animateProperty）方法實(shí)現(xiàn)動(dòng)畫方法

我們首先介紹1下args的參數(shù)：

• node：對(duì)那1個(gè)dom實(shí)現(xiàn)動(dòng)畫效果
• properties：動(dòng)畫的具體屬性設(shè)置，是1個(gè)style的鍵值對(duì)（最重要的1個(gè)屬性）
• duration：動(dòng)畫履行多久
• easing：可選參數(shù)，是1個(gè)函數(shù)，用來(lái)描寫動(dòng)畫應(yīng)當(dāng)如何變化，dojo給了1些自定義的函數(shù)，參考“
• onEnd：可選參數(shù)，當(dāng)動(dòng)畫完成以后觸發(fā)的函數(shù)
• delay：當(dāng)方法觸發(fā)以后，延遲幾秒觸發(fā)動(dòng)畫，默許是0秒

//用于動(dòng)畫的div
<div id="nodeId" style="background-color: red"></div>
//代碼
 require(["dojo/_base/fx","dojo/domReady!"],function(basefx){
            basefx.animateProperty({
                node:"nodeId",
                properties:{
                    width: { start: '200', end: '400', units:"px" },
                    height: { start:'200', end: '400', units:"px" }
                },
                duration:4000,
                delay:2000,
                easing: function (n) {
                    return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
                },
                onEnd:function(node){
                    alert("動(dòng)畫結(jié)束了")
                }
            }).play();

解釋參數(shù)：

• 此函數(shù)的意義是將動(dòng)畫從長(zhǎng)寬為200px變成400px
• node屬性代表對(duì)哪個(gè)Dom實(shí)現(xiàn)動(dòng)畫效果
• duration屬性代表動(dòng)畫的時(shí)間，也就是變化時(shí)間為5秒
• delay屬性代表我們延遲兩秒
• easing方法有1個(gè)返回值，代表動(dòng)畫變化的速率，此時(shí)期表動(dòng)畫越變?cè)娇?，如果不寫這個(gè)屬性代表均勻變化
• onEnd方法代表當(dāng)動(dòng)畫運(yùn)行結(jié)束時(shí)，回調(diào)的方法，方法傳入1個(gè)node參數(shù)，代表動(dòng)畫的對(duì)象

注意1點(diǎn)：properties的樣式對(duì)應(yīng)的值也能夠是1個(gè)函數(shù)，例如：

basefx.animateProperty({
    node:"nodeId",
    properties:{
        width:{
            start:function(node){ return 100; },
            end:function(node){ return 200; }
        }
    }
}).play();

在強(qiáng)調(diào)1下：properties的值可以是1個(gè)函數(shù)，在這個(gè)函數(shù)中可以拿到我們的DOM元素（注意函數(shù)有1個(gè)參數(shù)為node）

2.2 解釋剩余3種方法實(shí)現(xiàn)動(dòng)畫方法

我們直接看剩余3個(gè)方法

• anim(node,properties,duration,easing,onEnd,delay) 其實(shí)anim的方法和animateProperty方法是1樣的，區(qū)分是animateProperty傳入1個(gè)對(duì)象，anim方法是傳入6個(gè)參數(shù)
• fadeIn可讓dom元素從無(wú)到有的1個(gè)進(jìn)程，他的args參數(shù)主要填：node,duration,easing,這3個(gè)參數(shù)的意義和animateProperty參數(shù)的意義相同
• fadeOut方法可讓DOM元素從有到無(wú)的1個(gè)進(jìn)程，他的args參數(shù)主要填：node,duration,easing,這3個(gè)參數(shù)的意義和animateProperty參數(shù)的意義相同

3 dojo/fx實(shí)現(xiàn)動(dòng)畫效果

      在dojo/fx模塊中我們可以實(shí)現(xiàn)1些高級(jí)的動(dòng)畫效果，這個(gè)模塊給我們提供了1些方法：

• wipeIn和wipeOut實(shí)現(xiàn)了卷簾效果
• slideTo實(shí)現(xiàn)了DOM元素的移動(dòng)
• combine和chain可以同時(shí)讓多個(gè)DOM元素進(jìn)行動(dòng)畫效果

3.1實(shí)現(xiàn)卷簾效果wipeIn和wipeOut

這兩個(gè)方法都需要傳入1個(gè)args對(duì)象，基本和animateProperty類似，代碼以下

• wipeOut方法，需要注意的是，args沒有properties屬性（千萬(wàn)不要寫）

//動(dòng)畫的dom元素
 <div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div>
 //動(dòng)畫代碼
require(["dojo/fx","dojo/domReady!"],function(fx){
            fx.wipeOut({
                node:"nodeId",
                duration:4000,
                delay:2000,
                easing: function (n) {
                    return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
                },
                onEnd:function(node){
                    alert("動(dòng)畫結(jié)束了")
                }
            }).play();
        })

• wipeIn方法，需要注意的是，args沒有properties屬性（千萬(wàn)不要寫）

//注意兩點(diǎn)：
//      1.div1開始display：none,同時(shí)不需要設(shè)置height屬性（框架總是指定為auto）
//      2.div里面必須有內(nèi)容（必須有內(nèi)容，不然不行）
    <div id="nodeId" style="width: 500px;background-color: red;display: none;">
        <b>This is a container of random content to wipe in!</b>
    </div>

//js代碼
require(["dojo/fx","dojo/domReady!"],function(fx){
                fx.wipeIn({
                    node:"nodeId"
                }).play();
        })

3.2實(shí)現(xiàn)滑動(dòng)效果slideTo

滑動(dòng)效果很簡(jiǎn)單，就是從某1個(gè)位置移動(dòng)到另外1個(gè)位置，代碼以下

 <div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div>

require(["dojo/fx","dojo/domReady!"],function(fx){
                fx.slideTo({
                    node: "nodeId",
                    top: "40",
                    left: "50",
                    units: "px"
                }).play();
        })

3.3多個(gè)動(dòng)畫組合使用

dojo/fx 模塊給我們提供了兩個(gè)方法，1個(gè)是chain，1個(gè)叫做combine，其中他們的區(qū)分是（假定有兩個(gè)動(dòng)畫效果）：

• chain函數(shù)是多個(gè)動(dòng)畫順序履行（先履行1動(dòng)畫，在履行2動(dòng)畫）
• combine是多個(gè)動(dòng)畫同時(shí)履行（1和2動(dòng)畫同時(shí)履行）

實(shí)例代碼：

   <div id="nodeId" style="width: 200px;height:200px; background-color: red"></div>
    <div id="nodeId2" style="width: 500px;background-color: red;display: none;">
        <b>This is a container of random content to wipe in!</b>
    </div>

require(["dojo/fx","dojo/domReady!"],function(fx){
            fx.combine([
                fx.wipeOut({
                    duration: 1200,
                    node: "nodeId"
                }),
                fx.wipeIn({
                    duration: 1200,
                    node: "nodeId2"
                })
            ]).play();
        })

4.Dojo關(guān)于面向切面編程的實(shí)現(xiàn)（AOP）

      如果大家學(xué)過(guò)后臺(tái)語(yǔ)言（比如Java），大家1定會(huì)知道1個(gè)非常著名的概念：AOP，AOP的目的也是為了模塊化編程，一樣Dojo也給我們實(shí)現(xiàn)了簡(jiǎn)單的AOP，這個(gè)模塊叫做dojo/aspect，接下來(lái)我們看1下這個(gè)模塊如何和我們的動(dòng)畫效果結(jié)合。
      在aspect模塊中主要實(shí)現(xiàn)了3個(gè)方法：after,around,before,我們將這3個(gè)方法分別叫做：后置通知，環(huán)繞通知，前置通知（具體甚么意思，大家可以去看 AOP專業(yè)的書），在這里我們主要簡(jiǎn)單說(shuō)1下這3個(gè)方法的作用。

4.1前置通知

require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){
            var anim=fx.wipeOut({
                node:"nodeId",
                duration:4000
            });
            aspect.before(anim,"play",function(){
                alert("履行動(dòng)畫之前")
            })
            anim.play();
        })

• 解釋：我們利用切面，綁定了在anim對(duì)象在只想play函數(shù)之前，首先履行我們的切面函數(shù)。

4.2后置通知

require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){
            var anim=fx.wipeOut({
                node:"nodeId",
                duration:4000,
                onEnd:function(node){
                    alert("動(dòng)畫結(jié)束了")
                }

            });
            aspect.after(anim,"onEnd",function(){
                alert("履行動(dòng)畫以后")
            })
            anim.play();
        })

解釋：我們?cè)诼男衞nEnd函數(shù)以后履行切面函數(shù)

4.3環(huán)繞通知

        require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){
            var anim=fx.wipeOut({
                node:"nodeId",
                duration:4000
            });
            aspect.around(anim,"play",function(originalFoo){
                return function(){
                    alert("履行動(dòng)畫之前")
                    var results = originalFoo.apply(this, arguments);
                    alert("履行動(dòng)畫以后")
                }
            })
            anim.play();

• 環(huán)繞通知是在履行目標(biāo)方法之前和以后履行1定邏輯運(yùn)算
• originalFoo.apply是履行源方法，如果不履行這個(gè)方法，那末anim.play()方法不會(huì)被履行（也就是說(shuō)我可以控制目標(biāo)方法發(fā)履行）