使用 Dojo 动画效果-2

look_w

Dojo 动画效果库实现原理HTML 和 W3C DOM 模型规范都没有规定如何在 DOM 节点上增加动画效果，但是通过 JavaScript                的定时器（setTimeout，setInterval）动态设置 CSS                属性可以模拟实现动画效果。我们知道电影画面并不是连续的，而是一帧一帧的静态图像的切换，只是帧切换速度很快使人产生图像在移动的感觉。通过这种原理，我们可以每隔一定时间改变                DOM 节点的颜色，位置等属性来实现动画效果。
如实现清单 1 类似功能的淡出效果：
清单 2.淡出效果—— JavaScript 版

1 2 3 4 5 6 7 8 9 10 11 12 13

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                方法进行播放。