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

轉載于:https://www.cnblogs.com/tiandi/p/3415909.html

總結

以上是生活随笔為你收集整理的dojo 九 effects dojo/_base/fx 和 dojo/fx的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。