官方教程：Dojo Effects
這里講學(xué)習(xí)一下dojo如何實(shí)現(xiàn)淡入、淡出、滑動(dòng)等效果。
實(shí)現(xiàn)這些特殊的效果有兩個(gè)包 dojo/_base/fx 和 dojo/fx。
dojo/_base/fx 中提供了一些基礎(chǔ)的animation方法，如： animateProperty, anim, fadeIn, and fadeOut.
dojo/fx 中提供了一些高級(jí)的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");//目標(biāo)節(jié)點(diǎn) ????????on(fadeOutButton, "click", function(evt){ ????????????fx.fadeOut({ node: fadeTarget }).play();//淡出 ????????}); ????????on(fadeInButton, "click", function(evt){ ????????????fx.fadeIn({ node: fadeTarget }).play();//淡入 ????????}); ????});

在所有的方法中包含后面介紹的，都只有一個(gè)對(duì)象參數(shù)，這個(gè)對(duì)象中可包含多個(gè)屬性，必不可少的一個(gè)屬性就是node，為要實(shí)現(xiàn)效果的節(jié)點(diǎn)對(duì)象或id字符串。
在fadeOut/fadeIn方法中還有一個(gè)屬性duration，持續(xù)的時(shí)間，默認(rèn)為350ms。
這些animation方法將返回一animation對(duì)象，該對(duì)象包含一些方法：play, pause, stop, status, and gotoPercent，用來(lái)執(zhí)行，暫停，停止，查看狀態(tài)及執(zhí)行到某種程度。

擦除
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(); ????????}); ????});
同淡入淡出一樣

滑動(dòng)
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方法的參數(shù)中，除了節(jié)點(diǎn)對(duì)象屬性外，還有l(wèi)eft和top兩個(gè)屬性，用來(lái)設(shè)置滑動(dòng)到目的位置的坐標(biāo)。

事件
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(); ????????????}); ????});
在實(shí)現(xiàn)動(dòng)態(tài)效果的過(guò)程中會(huì)產(chǎn)生兩個(gè)事件，一個(gè)是beforeBegin，在執(zhí)行之前調(diào)用；一個(gè)是onEnd，在執(zhí)行完后調(diào)用。
在上面的例子中可以看到，beforeBegin是作為參數(shù)對(duì)象中的一個(gè)方法來(lái)定義的；onEnd是作為animation對(duì)象的一個(gè)事件在on中定義的。

連鎖反應(yīng)
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用來(lái)將多個(gè)animation動(dòng)作連接起來(lái)按順序執(zhí)行，它的參數(shù)即是由不同animation方法返回的animation對(duì)象組成的數(shù)組，執(zhí)行的順序就是數(shù)組的先后順序。

聯(lián)合
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方法是將多個(gè)animation動(dòng)作聯(lián)合起來(lái)同時(shí)執(zhí)行實(shí)現(xiàn)一個(gè)完成的動(dòng)態(tài)效果。其參數(shù)也是由不同animation方法返回的animation對(duì)象組成的數(shù)組。

轉(zhuǎn)載于:https://www.cnblogs.com/tiandi/p/3415909.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。