使用 Dojo 动画效果

核心提示： 在浏览器中打开该页面，在页面加载后 id 为“foo”的 div 节点在一秒之内逐渐淡化直至隐藏，使用 Dojo 动画效果(2)，dojo.fadeOut 函数接受一个 hash 对象作为参数，其中指定了作用对象的 id 及动画持续的时间，通过这种原理，我们可以每隔一定时

在浏览器中打开该页面，在页面加载后 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();