官方教程: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对象组成的数组。