Dojo动画原理解析

　　dojo中动画部分分为两部分：dojo/_base/fx, dojo/fx。dojo/_base/fx部分是dojo动画的基石，里面有两个底层API：animateProperty、anim和两个常用动画：fadeIn、fadeOut（类似jQuery中的show、hide）。dojo/fx中有两个复合动画：chain（类似jQuery中的动画队列）、combine和三个动画函数：wipeIn、wipeOut、slideTo。

　　dojo中动画的原理与jquery类似，都是根据setInterval计算当前时间与初试时间差值与总时间的半分比来确定元素动画属性的当前计算值：

percent = (Date.now() - startTime) / duration;
value = (end - start) * percent + start;

　　接下来我们会一步步的演化，慢慢接近dojo API

　　首先我们实现一个动画函数，他接受以下参数：

• node： 动画元素
• prop： 动画属性
• start： 动画起始值
• end：  动画结束值
• duration： 动画执行时间
• interval：动画间隔

function Animate(node, prop, start, end, duration, interval) {
 var startTime = Date.now();
 
 var timer = setInterval(function(){
  var percent = (Date.now() - startTime) / duration;
  percent = percent < 0 ? 0 : percent;
  percent = percent > 1 ? 1 : percent;
  var v = (end - start) * percent + start;
 
  node.style[prop] = v;
 
  if (percent >= 1) {
   clearInterval(timer);
  }
 }, interval);
}

View Code