1.引言
在本篇博客中主要介绍两个模块的使用,一个是dojo/_base/fx
,另外一个模块是dojo/fx
,这两个模块的作用是实现DOM元素的动画效果,通过名字我们可以看出:
dojo/_base/fx
提供一些基础的动画效果dojo/fx
提供一些高级的动画效果
接下来我们就来用一些这两个模块实现的动画效果
2 dojo/_base/fx
实现动画效果
在dojo/_base/fx
模块中提供了五个方法来实现动画效果:animateProperty
, anim
, fadeIn
, fadeOut
,接下来我们主要介绍一个方法animateProperty
,因为当这个方法会使用的时候,其他的方法也就会了。
2.1 使用(animateProperty)方法实现动画方法
我们首先介绍一下args的参数:
- node:对于那一个dom实现动画效果
- properties:动画的具体属性设置,是一个style的键值对(最重要的一个属性)
- duration:动画执行多久
- easing:可选参数,是一个函数,用来描述动画应该如何变化,dojo给了一些自定义的函数,参考“
- onEnd:可选参数,当动画完成之后触发的函数
- delay:当方法触发之后,延迟几秒触发动画,默认是0秒
//用于动画的div
<div id="nodeId" style="background-color: red"></div>
//代码
require(["dojo/_base/fx","dojo/domReady!"],function(basefx){
basefx.animateProperty({
node:"nodeId",
properties:{
width: { start: '200', end: '400', units:"px" },
height: { start:'200', end: '400', units:"px" }
},
duration:4000,
delay:2000,
easing: function (n) {
return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
},
onEnd:function(node){
alert("动画结束了")
}
}).play();
解释参数:
- 此函数的意义是将动画从长宽为200px变为400px
- node属性代表对哪一个Dom实现动画效果
- duration属性代表动画的时间,也就是变化时间为5秒
- delay属性代表我们延迟两秒
- easing方法有一个返回值,代表动画变化的速率,此时代表动画越变越快,如果不写这个属性代表均匀变化
- onEnd方法代表当动画运行结束时,回调的方法,方法传入一个node参数,代表动画的对象
注意一点:properties的样式对应的值也可以是一个函数,例如:
basefx.animateProperty({
node:"nodeId",
properties:{
width:{
start:function(node){ return 100; },
end:function(node){ return 200; }
}
}
}).play();
在强调一下:properties的值可以是一个函数,在这个函数中可以拿到我们的DOM元素(注意函数有一个参数为node)
2.2 解释剩余三种方法实现动画方法
我们直接看剩余三个方法
anim(node,properties,duration,easing,onEnd,delay)
其实anim的方法和animateProperty方法是一样的,区别是animateProperty传入一个对象,anim方法是传入6个参数fadeIn
可以让dom元素从无到有的一个过程,他的args参数主要填:node
,duration
,easing
,这三个参数的意义和animateProperty参数的意义相同fadeOut
方法可以让DOM元素从有到无的一个过程,他的args参数主要填:node
,duration
,easing
,这三个参数的意义和animateProperty参数的意义相同
3 dojo/fx
实现动画效果
在dojo/fx
模块中我们可以实现一些高级的动画效果,这个模块给我们提供了一些方法:
wipeIn
和wipeOut
实现了卷帘效果slideTo
实现了DOM元素的移动combine
和chain
可以同时让多个DOM元素进行动画效果
3.1实现卷帘效果wipeIn
和wipeOut
这两个方法都需要传入一个args对象,基本和animateProperty类似,代码如下
wipeOut
方法,需要注意的是,args没有properties
属性(千万不要写)
//动画的dom元素
<div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div>
//动画代码
require(["dojo/fx","dojo/domReady!"],function(fx){
fx.wipeOut({
node:"nodeId",
duration:4000,
delay:2000,
easing: function (n) {
return (n==0) ? 0 : Math.pow(2, 10 * (n - 1));
},
onEnd:function(node){
alert("动画结束了")
}
}).play();
})
wipeIn
方法,需要注意的是,args没有properties
属性(千万不要写)
//注意两点:
// 1.div一开始display:none,同时不需要设置height属性(框架总是指定为auto)
// 2.div里面必须有内容(必须有内容,不然不行)
<div id="nodeId" style="width: 500px;background-color: red;display: none;">
<b>This is a container of random content to wipe in!</b>
</div>
//js代码
require(["dojo/fx","dojo/domReady!"],function(fx){
fx.wipeIn({
node:"nodeId"
}).play();
})
3.2实现滑动效果slideTo
滑动效果很简单,就是从某一个位置移动到另外一个位置,代码如下
<div id="nodeId" style="width: 500px;height: 500px; background-color: red"></div>
require(["dojo/fx","dojo/domReady!"],function(fx){
fx.slideTo({
node: "nodeId",
top: "40",
left: "50",
units: "px"
}).play();
})
3.3多个动画组合使用
dojo/fx
模块给我们提供了两个方法,一个是chain
,一个叫做combine
,其中他们的区别是(假设有两个动画效果):
chain
函数是多个动画顺序执行(先执行1动画,在执行2动画)combine
是多个动画同时执行(1和2动画同时执行)
实例代码:
<div id="nodeId" style="width: 200px;height:200px; background-color: red"></div>
<div id="nodeId2" style="width: 500px;background-color: red;display: none;">
<b>This is a container of random content to wipe in!</b>
</div>
require(["dojo/fx","dojo/domReady!"],function(fx){
fx.combine([
fx.wipeOut({
duration: 1200,
node: "nodeId"
}),
fx.wipeIn({
duration: 1200,
node: "nodeId2"
})
]).play();
})
4.Dojo关于面向切面编程的实现(AOP)
如果大家学过后台语言(比如Java),大家一定会知道一个非常有名的概念:AOP,AOP的目的也是为了模块化编程,同样Dojo也给我们实现了简单的AOP,这个模块叫做dojo/aspect
,接下来我们看一下这个模块如何和我们的动画效果结合。
在aspect
模块中主要实现了三个方法:after
,around
,before
,我们将这三个方法分别叫做:后置通知,环绕通知,前置通知(具体什么意思,大家可以去看 AOP专业的书),在这里我们主要简单说一下这三个方法的作用。
4.1前置通知
require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){
var anim=fx.wipeOut({
node:"nodeId",
duration:4000
});
aspect.before(anim,"play",function(){
alert("执行动画之前")
})
anim.play();
})
- 解释:我们利用切面,绑定了在anim对象在只想play函数之前,首先执行我们的切面函数。
4.2后置通知
require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){
var anim=fx.wipeOut({
node:"nodeId",
duration:4000,
onEnd:function(node){
alert("动画结束了")
}
});
aspect.after(anim,"onEnd",function(){
alert("执行动画之后")
})
anim.play();
})
解释:我们在执行onEnd函数之后执行切面函数
4.3环绕通知
require(["dojo/fx","dojo/aspect","dojo/domReady!"],function(fx,aspect){
var anim=fx.wipeOut({
node:"nodeId",
duration:4000
});
aspect.around(anim,"play",function(originalFoo){
return function(){
alert("执行动画之前")
var results = originalFoo.apply(this, arguments);
alert("执行动画之后")
}
})
anim.play();
- 环绕通知是在执行目标方法之前和之后执行一定逻辑运算
- originalFoo.apply是执行源方法,如果不执行这个方法,那么anim.play()方法不会被执行(也就是说我可以控制目标方法发执行)