官方教程：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對象組成的數組。
)