JS原生动画函数封装

这是我的第一篇博客。为了成为合格的前端开发工程师而努力。

利用自己所学的内容，将缓动动画和均速动画结合，封装了一个JS原生的动画函数。但是这个函数有很大的问题，即缓动动画只能执行减速，不能执行加速。

function getStyle(obj, attr) {     //获取对象的属性，并进行了兼容处理
   if (window.getComputedStyle) {
      return window.getComputedStyle(obj, null)[attr];
   } else {
      return obj.currentStyle[attr];
   }
}

//动画函数，obj为对象，json为包含改变属性为指定值的对象集合，speed为速度值，不用加单位，boolean是布尔值，true为匀速，false为变速，func为动画执行完成后的回
调函数
function animate(obj, json, speed, boolean, func) {
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
       //flag标记，动画执行完成后再执行回调函数
        var flag = true;
      for (var k in json) {
          var leader,target,step;
          if (k === "zIndex") {  //改变层级
              obj.style[k] = json[k];
            }
            else if (k === "opacity") {  //改变透明度
                leader = getStyle(obj, k) * 100;
                target = json[k] *100;
                if (boolean) {  //匀速
                    step = Math.abs(speed);
                    step = target > leader ? step : -step;
                } else {  //变速
                    step = (target - leader) / 10;
                    step = target > leader ? Math.ceil(step) : Math.floor(step);
                }
                leader += step;
                if (boolean) {  //匀速
                    if (Math.abs(target - leader) > Math.abs(step)) {
                        obj.style[k] = leader / 100 ;
                    }
                    else {  //变速
                        obj.style[k] = target / 100;
                    }
                }
                else {
                    obj.style[k] = leader / 100;
                }
            }
            else {  //改变其他属性
                leader = parseInt(getStyle(obj, k)) || 0;
                target = json[k];
                if (boolean) {  //匀速
                    step = Math.abs(speed);
                    step = target > leader ? step : -step;
                } else {  //变速
                    step = (target - leader) / 10;
                    step = target > leader ? Math.ceil(step) : Math.floor(step);
                }
                leader += step;
                if (boolean) {  //匀速
                    if (Math.abs(target - leader) > Math.abs(step)) {
                        obj.style[k] = leader + "px";
                    }
                    else {
                        obj.style[k] = target + "px";
                    }
                }
                else {  //变速
                    obj.style[k] = leader + "px";
                }
            
                if (leader !== target) {
                    flag = false;
                }
            }
      }
      if (flag) {
          clearInterval(obj.timer);
          if (func) {
              func();
            }
        }
   },15)
}

 

转载于:https://my.oschina.net/u/3472043/blog/894765