JavaScript 链式运动-动画

缓动运动框架

每次的步长 = （总路程 - 当前位置） / 运动系数（6-10）

function getStyle(el, attr) {
  return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr];
}

function bufferMove(el, obj, fn) {
  // fn就是回调函数
  clearInterval(el.timer);

  el.timer = setInterval(function () {
    var flag = true; // 判断是否所有属性都到达目标值，如果有一个属性没有到目标值，就将 flag 设置为 false。如果全部都到了目标值，那么 flag 就不会被改变为 false，就是初始 true
    for (var attr in obj) {
      // 判断 attr 是不是 opacity，是：采用一种获取办法，不是：采用之前的获取方法
      if (attr == 'opacity') {
        var cur = Math.round(getStyle(el, attr) * 100);
      } else {
        var cur = parseInt(getStyle(el, attr));
      }

      var step = (obj[attr] - cur) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);

      // if(cur == obj[attr]){
      //  clearInterval(el.timer);
      // }

      if (cur != obj[attr]) {
        // 如果有一个当前值，不等于目标值，说明没有全部执行完成
        flag = false;
      }

      // 赋值时也分两种情况，一种是透明度，另一种是带有单位 px 的
      if (attr == 'opacity') {
        el.style.opacity = (cur + step) / 100;
        el.style.filter = 'alpha(opacity=' + (cur + step) + ')';
      } else {
        el.style[attr] = cur + step + 'px';
      }
    }

    if (flag) {
      // 如果 flag 为假，说明没有全部属性达到目标值，那么不清除定时器，如果 flag 为 true 说明全部属性都达到了目标值，就清除定时器
      clearInterval(el.timer);

      // fn && fn();
      // 回调函数的 this 指向 window，当该运动框架适用于元素集合时，this 执行导致报错

      // if(fn) fn();
      // 改 call 就是修改函数的调用时的 this 指向
      if (fn) fn.call(el);
    }
  }, 20);
}