dojo 九 effects dojo/_base/fx 和 dojo/fx

官方教程：Dojo Effects
这里讲学习一下dojo如何实现淡入、淡出、滑动等效果。
实现这些特殊的效果有两个包 dojo/_base/fx 和
dojo/fx。
dojo/_base/fx 中提供了一些基础的animation方法，如： animateProperty,
anim, fadeIn, and fadeOut.
dojo/fx
中提供了一些高级的animation方法，如：chain, combine,
wipeIn, wipeOut and
slideTo。

淡入淡出
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();//淡入

        });

    });

在所有的方法中包含后面介绍的，都只有一个对象参数，这个对象中可包含多个属性，必不可少的一个属性就是node，为要实现效果的节点对象或id字符串。
在fadeOut/fadeIn方法中还有一个属性duration，持续的时间，默认为350ms。
这些animation方法将返回一animation对象，该对象包含一些方法：play,
pause, stop, status, and
gotoPercent，用来执行，暂停，停止，查看状态及执行到某种程度。

擦除
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();

        });

    });
同淡入淡出一样

滑动
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();

        });

    });
在slideTo方法的参数中，除了节点对象属性外，还有left和top两个属性，用来设置滑动到目的位置的坐标。

事件
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){

                // Note that we're specifying the
beforeBegin as a property of the animation

                // rather than using connect. This
ensures that our beforeBegin handler

                // executes before any
others.

                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"

                        });

                    }

                });

 

                // We could have also specified onEnd
above alongside beforeBegin,

                // but it's just as easy to connect like
so

                on(anim,
"End", function(){

                    style.set(slideTarget,
{

                        backgroundColor:
"blue"

                    });

                },
true);

 

                // Don't forget to actually start the
animation!

                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();

            });

    });

在实现动态效果的过程中会产生两个事件，一个是beforeBegin，在执行之前调用；一个是onEnd，在执行完后调用。
在上面的例子中可以看到，beforeBegin是作为参数对象中的一个方法来定义的；onEnd是作为animation对象的一个事件在on中定义的。

连锁反应
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");

             

        // Set up a couple of click handlers to run our
chained animations

        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();

        });

         

    });
chain用来将多个animation动作连接起来按顺序执行，它的参数即是由不同animation方法返回的animation对象组成的数组，执行的顺序就是数组的先后顺序。

联合
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");

 

        // Set up a couple of click handlers to run our
combined animations

        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();

        });

         

    });
combine方法是将多个animation动作联合起来同时执行实现一个完成的动态效果。其参数也是由不同animation方法返回的animation对象组成的数组。