南昌高端网站开发费用表,静态网站建设的PPT,网站建设建站,网站建设最好的公司排名官方教程#xff1a;Dojo Effects这里讲学习一下dojo如何实现淡入、淡出、滑动等效果。实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx。dojo/_base/fx 中提供了一些基础的animation方法#xff0c;如#xff1a; animateProperty, anim, fadeIn, and fadeOut.dojo/f…官方教程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 were 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 its just as easy to connect like so on(anim, End, function(){ style.set(slideTarget, { backgroundColor: blue }); }, true); // Dont 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
