1.引言

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

• dojo/_base/fx提供1些基礎的動畫效果
• dojo/fx提供1些高級的動畫效果

接下來我們就來用1些這兩個模塊實現(xiàn)的動畫效果

2 dojo/_base/fx實現(xiàn)動畫效果

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

2.1 使用（animateProperty）方法實現(xiàn)動畫方法

我們首先介紹1下args的參數：

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

//用于動畫的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("動畫結束了")
                }
            }).play();

解釋參數：

• 此函數的意義是將動畫從長寬為200px變成400px
• node屬性代表對哪個Dom實現(xiàn)動畫效果
• duration屬性代表動畫的時間，也就是變化時間為5秒
• delay屬性代表我們延遲兩秒
• easing方法有1個返回值，代表動畫變化的速率，此時期表動畫越變越快，如果不寫這個屬性代表均勻變化
• onEnd方法代表當動畫運行結束時，回調的方法，方法傳入1個node參數，代表動畫的對象

注意1點：properties的樣式對應的值也能夠是1個函數，例如：

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

在強調1下：properties的值可以是1個函數，在這個函數中可以拿到我們的DOM元素（注意函數有1個參數為node）

2.2 解釋剩余3種方法實現(xiàn)動畫方法

我們直接看剩余3個方法

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

3 dojo/fx實現(xiàn)動畫效果

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

• wipeIn和wipeOut實現(xiàn)了卷簾效果
• slideTo實現(xiàn)了DOM元素的移動
• combine和chain可以同時讓多個DOM元素進行動畫效果

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

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

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

//動畫的dom元素
 <div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div>
 //動畫代碼
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("動畫結束了")
                }
            }).play();
        })

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

//注意兩點：
//      1.div1開始display：none,同時不需要設置height屬性（框架總是指定為auto）
//      2.div里面必須有內容（必須有內容，不然不行）
    <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實現(xiàn)滑動效果slideTo

滑動效果很簡單，就是從某1個位置移動到另外1個位置，代碼以下

 <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多個動畫組合使用

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

• chain函數是多個動畫順序履行（先履行1動畫，在履行2動畫）
• combine是多個動畫同時履行（1和2動畫同時履行）

實例代碼：

   <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關于面向切面編程的實現(xiàn)（AOP）

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

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("履行動畫之前")
            })
            anim.play();
        })

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

4.2后置通知

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

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

解釋：我們在履行onEnd函數以后履行切面函數

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("履行動畫之前")
                    var results = originalFoo.apply(this, arguments);
                    alert("履行動畫以后")
                }
            })
            anim.play();

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