级别： 初级 张 顺, 软件工程师, IBM
段 家钦, 软件工程师, IBM
2009 年 9 月 16 日 在 Web 页面中加入适当的动画效果能够使页面更加生动，提高用户体验。Dojo 提供了动画效果库，并被加入到核心基础库中，广泛用于各种 dijit 和 dojox 控件中。Dojo 的动画效果库采用标准的 JavaScript 和 CSS 实现。本文简要介绍 Dojo 动画效果库的实现原理，然后详细介绍如何使用该库创建淡入、淡出、擦除等动画效果以及如何组合使用这些动画效果。
在 Web 页面中加入适当的动画效果能够使页面更加生动，提高用户体验。Dojo 提供了动画效果库，并被加入到核心基础库中，广泛用于各种 dijit 和 dojox 控件中。Dojo 的动画效果库采用标准的 JavaScript 和 CSS 实现。本文简要介绍 Dojo 动画效果库的实现原理，然后详细介绍如何使用该库创建淡入、淡出、擦除等动画效果以及如何组合使用这些动画效果。
Dojo 动画效果库简介
Dojo 动画效果库采用标准 JavaScript 语言和 CSS 实现，能够为 HTML 元素增加可视化效果，作为一个 Dojo 基础类库，在很多 dijit 和 dojox 控件中都有使用。使用 Dojo 动画效果库可以很方便地创建淡入、淡出、飞入及擦除等可视化效果，并且可以组合使用这些动画效果实现更为复杂的功能。
下面的例子说明了如何实现一个淡出效果：
清单 1.淡出效果
<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 动画库的实现原理，然后介绍如何通过 dojo.animateProperty 来对元素的 CSS 属性进行迭代从而创建动画效果，以及基于 dojo.animateProperty 封装的一些标准动画效果，最后介绍如何通过组合单个的动画效果来实现更为复杂的动画效果。
Dojo 动画效果库实现原理
HTML 和 W3C DOM 模型规范都没有规定如何在 DOM 节点上增加动画效果，但是通过 JavaScript 的定时器（setTimeout，setInterval）动态设置 CSS 属性可以模拟实现动画效果。我们知道电影画面并不是连续的，而是一帧一帧的静态图像的切换，只是帧切换速度很快使人产生图像在移动的感觉。通过这种原理，我们可以每隔一定时间改变 DOM 节点的颜色，位置等属性来实现动画效果。
如实现清单 1 类似功能的淡出效果：
清单 2.淡出效果—— JavaScript 版
var foo = document.getElementById("foo");
var duration = 1000;
var step = 20;
var countdown = duration/step;
function fadeOut(){
if(countdown <= 0)
return;
else{
foo.style.opacity = --countdown/(duration/step);
setTimeout(fadeOut,step);
}
};
fadeOut();
|
为了实现淡出的效果，我们可以动态地调整 opacity 属性改变元素的透明度，开始的时候值为 1 表示完全不透明，结束的时候值为 0，这个时候元素隐藏。通过设置步长与持续时间，我们可以计算出总共需要调用多少次 fadeOut 函数，在 fadeOut 函数里动态改变计数器及元素 opacity 的值，如果计数器值不为零则通过 setTimeout 函数设置在指定步长的时间之后继续调用 fadeOut 函数来降低元素的 opacity 属性值以实现 DOM 节点逐渐淡出的动画效果。
Dojo 动画效果库对这种机制进行了良好的封装，简化了调用接口，我们只需创建动画对象并设置动画属性，就可以在以后的程序中随时调用动画对象的 play 方法进行播放。
使用 dojo.animateProperty 创建动画
前面提到实现动画的原理是对 DOM 元素的属性进行迭代，不断修改其值以改变元素的位置和外观等。使用 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 个分量分别进行迭代。
清单 5.颜色的动画效果
dojo.animateProperty({
node: "foo",
properties: { color: {start:'yellow',end:'blue'}}
}).play();
|
dojo.animateProperty 函数提供了同时对多个属性值进行迭代的能力，如下面的例子实现了同时对 width、height 和 padding-top 进行迭代。注意连字符“-”不能作为 hash 的键名，所以采用 paddingTop 代替 padding-top。
清单 6.多个属性的动画效果
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._Animation 对象
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"。
指定事件回调函数的方式有两种，一是在创建动画对象的时候指定：
清单 7.动画事件处理
dojo.animateProperty({
node: "foo",
properties: { color: {start:'yellow',end:'blue'}},
onEnd: function(){
alert('animation ended.');
}
}).play();
|
另一种是通过 dojo.connect 将回调函数连接到动画对象的事件上，如下：
清单 8.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 等标准的动画效果。
dojo.fadeIn/dojo.fadeOut
实现淡入淡出的动画效果，通过迭代 DOM 节点的 opacity 属性来实现的，fadeIn 函数的结束值为 1，fadeOut 的结束值为 0。node 指定 DOM 节点的 id，duration 指定持续时间，还有一个可选的 easing 参数用来指定缓和曲线函数。
清单 9.淡入淡出效果
dojo.fadeIn({
node: "foo",
duration: 1000
}).play()
dojo.fadeOut({
node: "foo",
duration: 1000
}).play()
|
dojo.fx.slideTo
实现飞入的动画效果，通过迭代 DOM 节点的 left 和 top 值实现。使用方式如下：
清单 10.飞入效果
dojo.fx.slideTo({
node: "foo",
left:"40",
top:"50",
unit:"px"
}).play();
|
dojo.fx.wipeIn/dojo.fx.wipeOut
wipeIn 实现将 DOM 节点从上往下展开显示的动画效果，wipeOut 实现将节点从下往上收缩直至隐藏的动画效果，通过迭代其高度属性值实现。其使用非常简单，只需设置持续时间即可。
清单 11.wipeIn 和 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 则同时执行多个动画效果，它们都接受一个动画对象数组作为参数。如下面的例子：
清单 12.组合动画效果
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();
|
dojo.fx.Toggler
一个经常使用动画的场景是在 DOM 节点显示和隐藏，我们需要分别为显示和隐藏创建动画对象，保存它们的引用以便在需要的时候调用，如此一来我们需要为同一个 DOM 节点保存两个动画对象。使用 dojo.fx.Toggler 可以保存 DOM 节点的显示和隐藏动画，通过调用 show 或 hide 方法来调用动画效果，从而达到简化使用的目的。
清单 13.Toggler 的应用
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 节点的显示和隐藏动画，简化编程。
声明：
本文仅代表个人观点。
参考资料 学习
获得产品和技术
-
IBM 试用软件：使用这些可直接从 developerWorks 下载的软件构建您的下一个开发项目。
讨论
作者简介  | 
| | 张顺，现在 IBM 中国软件开发实验室 Lotus 开发中心工作，目前从事 Lotus Quickr 的开发定制以及客户支持工作。对 Web 服务，Web2.0 相关技术有浓厚的兴趣。 |
| | | 段家钦 ,2007 年 4 月加入 IBM，现主要从事 InfoSphere Warehouse 产品的安装与配置工作，对基于 Ajax 的前端 UI 开发技术有着丰富的经验。他在北京航空航天大学计算机系获得硕士学位。 |
对本文的评价
| 
