Dojo 动画效果库采用标准 JavaScript 语言和 CSS 实现，能够为 HTML 元素增加可视化效果，作为一个 Dojo 基础类库，在很多 dijit 和 dojox 控件中都有使用。使用 Dojo 动画效果库可以很方便地创建淡入、淡出、飞入及擦除等可视化效果，并且可以组合使用这些动画效果实现更为复杂的功能。
下面的例子说明了如何实现一个淡出效果：
<html>
<head>
<title>dojo.fx Demo</title>
<script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: true">
</script>
<script type="text/javascript">
dojo.require("dojo.fx");
dojo.addOnLoad(function(){
var fadeout = dojo.fadeOut({
node: "foo",
duration: 1000
});
fadeout.play();
});
</script>
</head>
<body>
<div id="foo">
This is dojo.fx demo.
</div>
</body>
</html>
|
在浏览器中打开该页面，在页面加载后 id 为“foo”的 div 节点在一秒之内逐渐淡化直至隐藏。dojo.fadeOut 函数接受一个 hash 对象作为参数，其中指定了作用对象的 id 及动画持续的时间，返回一个动画对象，调用这个对象的 play 方法来播放动画。使用 Dojo 动画效果库的模式与使用其他库类似，首先要使用 dojo.require(“dojo.fx”) 加载相应的类库，然后通过 dojo.fadeIn, dojo.fadeOut 等函数创建动画对象、设置动画的属性，最后调用动画对象的 play 方法播放动画。
使用 dojo.animateProperty 函数可以方便地创建动画对象实现对一组元素属性值的迭代。同大多数 Dojo 控件的构造函数一样它接受一个 hash 对象作为参数，返回一个 dojo._Animation 对象，调用该对象的 play 方法进行播放。输入参数说明如下：
node：DOM 节点的 id 或者引用
properties：要进行迭代的 style 属性的数组。一般来说能够迭代的属性需要是数值类型的，但是某些属性如颜色，像 red，blue 这样的字符串也是可以的。每个属性又可以有 3 个参数：start，end 和 unit。start 和 end 用来指定属性开始和结束的值，unit 指定属性值的单位，如长度单位 px。在使用中并不一定需要指定所有的 3 个参数，如不指定 start 则会将当前属性值作为 start。
duration：动画效果的持续时间，单位毫秒。可选参数，默认值为 350 毫秒。
rate：迭代的间隔，单位毫秒。可选参数，默认值为 10 毫秒。
easing：指定动画的缓和曲线函数，dojo.fx.easing 中定义了如 linear, quadIn, cubicIn, sineOut, bounceIn 等函数，可以用来替换默认的 dojo._defaultEasing 函数。可选参数。
事件处理函数：dojo.animateProperty 提供的扩展机制，指定在播放、暂停等事件发生时的回调函数。可选函数。
下面的例子通过 dojo.animateProperty 函数创建淡出动画效果：
清单 3.淡出效果—— dojo.animateProperty 简化版
dojo.animateProperty({
node: "foo",
duration: 1000,
properties: { opacity: 0 },
}).play();
|
上面的写法只指定了属性的结束值，Dojo 会将 DOM 节点当前的 opacity 值作为 start 值，由于 opacity 并不需要单位，所以不需要指定 unit 参数。下面是更加标准的写法：
清单 4.淡出效果—— dojo.animateProperty 标准版
dojo.animateProperty({
node: "foo",
duration: 1000,
properties: { opacity: {start:1,end:0}}
}).play();
|
对于颜色我们可以直接指定颜色名，如下面的例子指定了从“yellow”到“blue”的渐变，Dojo 会将颜色分解为 RGB 值，如黄色为（255，255，0），蓝色为（0，0，255），然后对 3 个分量分别进行迭代。
dojo.animateProperty({
node: "foo",
properties: { color: {start:'yellow',end:'blue'}}
}).play();
|
dojo.animateProperty 函数提供了同时对多个属性值进行迭代的能力，如下面的例子实现了同时对 width、height 和 padding-top 进行迭代。注意连字符“-”不能作为 hash 的键名，所以采用 paddingTop 代替 padding-top。
dojo.animateProperty({
node: “foo”,
duration:2000,
properties: {
width: { start: '200', end: '400', unit:"px" },
height: { start:'200', end: '400', unit:"px" },
paddingTop: { start:'5', end:'50', unit:"px" }
}
}).play();
|
dojo.animateProperty 函数返回的是 dojo._Animation 对象，通过调用该对象方法我们可以自由控制动画播放的行为以及查询播放状态。
play (delay, gotoStart)：播放动画，delay：整型，指定延迟播放的时间，缺省为 0. gotoStart： 布尔值，为真则从头开始播放动画，否则从当前位置开始播放。缺省为 false。
pause()：暂停播放。
gotoPercent (percent, andPlay)：设置动画的当前位置，percent 指定当前位置在总长度中的百分比，andPlay：布尔值，为真的时候在设置位置之后接着播放动画。
stop(gotoEnd)：停止播放，gotoEnd：布尔值，为真时会将当前位置设置为 1%。
status()：返回动画对象的当前状态，取值范围为"paused"，"playing"和"stopped"。
在动画播放的过程中，我们可能需要对一些事件进行处理，如在动画开始之前做一些初始化工作，动画暂停时显示继续播放按钮，在动画结束后跳转到其他页面等。Dojo 动画提供了事件处理扩展机制，我们可以指定要处理事件的回调函数，事件触发后会调用对应的回调函数。目前可以使用的事件有："beforeBegin", "onBegin", "onPlay", "onAnimate", "onPause"和"onStop"。
指定事件回调函数的方式有两种，一是在创建动画对象的时候指定：
dojo.animateProperty({
node: "foo",
properties: { color: {start:'yellow',end:'blue'}},
onEnd: function(){
alert('animation ended.');
}
}).play();
|
另一种是通过 dojo.connect 将回调函数连接到动画对象的事件上，如下：
var anim = dojo.animateProperty({
node: "foo",
properties: { color: {start:'yellow',end:'blue'}}
});
dojo.connect(anim,"onEnd", function(){
alert("animation ended");
});
anim.play();
|
使用 dojo.animateProperty 可以对 DOM 节点的属性集合进行迭代以实现动画效果，dojo.animateProperty 是 dojo.fx.* 函数簇的基础。Dojo 动画库对一些常用的动画效果进行了封装，提供了 dojo.fadeIn, dojo.fadeOut, dojo.fx.wipeIn, dojo.fx.wipeOut, dojo.fx.sideTo 等标准的动画效果。
实现淡入淡出的动画效果，通过迭代 DOM 节点的 opacity 属性来实现的，fadeIn 函数的结束值为 1，fadeOut 的结束值为 0。node 指定 DOM 节点的 id，duration 指定持续时间，还有一个可选的 easing 参数用来指定缓和曲线函数。
dojo.fadeIn({
node: "foo",
duration: 1000
}).play()
dojo.fadeOut({
node: "foo",
duration: 1000
}).play()
|
实现飞入的动画效果，通过迭代 DOM 节点的 left 和 top 值实现。使用方式如下：
dojo.fx.slideTo({
node: "foo",
left:"40",
top:"50",
unit:"px"
}).play();
|
dojo.fx.wipeIn/dojo.fx.wipeOut
wipeIn 实现将 DOM 节点从上往下展开显示的动画效果，wipeOut 实现将节点从下往上收缩直至隐藏的动画效果，通过迭代其高度属性值实现。其使用非常简单，只需设置持续时间即可。
dojo.fx.wipeIn({
node: "foo",
duration: 1000
}).play();
dojo.fx.wipeOut({
node: "foo",
duration: 1000
}).play();
|
除了可以使用 dojo.animateProperty，以及基于 dojo.animateProperty 的标准动画效果创建动画外，Dojo 动画库还提供了组合这些动画效果的方式，能够以串行或并行的方式一次执行多个动画效果。dojo.fx.chain 用来将多个动画效果组合起来顺序执行，dojo.fx.combine 则同时执行多个动画效果，它们都接受一个动画对象数组作为参数。如下面的例子：
dojo.fx.chain([
dojo.fx.wipeOut({ node:"foo" }),
dojo.fx.wipeIn({ node:"foo1" })
]).play();
dojo.fx.combine([
dojo.fx.wipeOut({ node:"foo" }),
dojo.fx.wipeIn({ node:"foo1" })
]).play();
|
一个经常使用动画的场景是在 DOM 节点显示和隐藏，我们需要分别为显示和隐藏创建动画对象，保存它们的引用以便在需要的时候调用，如此一来我们需要为同一个 DOM 节点保存两个动画对象。使用 dojo.fx.Toggler 可以保存 DOM 节点的显示和隐藏动画，通过调用 show 或 hide 方法来调用动画效果，从而达到简化使用的目的。
var t = new dojo.fx.Toggler({
node: "foo",
showDuration: 1000,
hideDuration: 1000,
showFunc: dojo.fx.wipeIn,
hideFunc: dojo.fx.wipeOut
});
t.show(100);
t.hide();
|
如上，node 指定 DOM 节点的 id，showDuration 和 hideDuration 分别指定显示和隐藏的持续时间，默认值均为 200. showFunc 和 hideFunc 分别指定显示和隐藏的动画效果对象，默认值分别为 dojo.fadeIn 和 dojo.fadeOut。然后就可以调用 show 和 hide 方法来显示和隐藏 DOM 节点。show 和 hide 方法也可以指定延迟时间。
Dojo 动画效果库是通过动态改变 DOM 节点的样式属性来实现的，我们可以通过 dojo.animateProperty 来对 DOM 节点的一组属性值进行迭代来创建动画效果，也可以通过预定义的 fadeIn，fadeOut, wipeIn, wipOut, slideTo 等标准函数创建动画效果，还能够通过 dojo.fx.chain 或 dojo.fx.combine 组合多个动画效果来串行或并行执行。另外，可以使用 dojo.fx.Toggler 封装针对一个 DOM 节点的显示和隐藏动画，简化编程。
转载自：http://www.ibm.com/developerworks/cn/web/0909_zhangshun_dojoanim/
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
