缓动动画函数的封装

1.基础版缓动动画

function slowAnimation(elm, target) {
        clearInterval(elm.timeID);
        let position = elm.offsetLeft;
        elm.timeID = setInterval(function () {
          let step =
            target - position > 0
              ? Math.ceil((target - position) / 10)
              : Math.floor((target - position) / 10);
          position += step;
          elm.style.left = position + "px";
          if (position == target) {
            clearInterval(elm.timeID);
          }
        }, 20);
      }

注意:

1.缓动的步长是一直有变动的所以要设置在定时器的里面跟匀速的不一样

2.设置步长的时候每次的不尝试 (target-position)/10 如果是正数向上取整如果是负数就向下取整这是为了方便的得到步长是是一个不为0的整数 .

3.判断的条件就是元素现在的位置是否等于目标的位置如果是的话清除定时器不是的话继续执行

2.传入对象的时候(多个参数进行封装成对象传入的时候)

 function slowAnimation(elm, obj) {
        clearInterval(elm.timeID);
        let flag = true;
        elm.timeID = setInterval(function () {
          for (let key in obj) {
            let position = elm.getComputedStyle(elm[key]);
            position = Math.parse(position);
            let step =
              obj[key] - position
                ? Math.ceil(obj[key] - position)
                : Math.floor(obj[key] - position);
            position += step;
            elm.style[key] = position + "px";
            if (position != obj[key]) {
              flag = false;
            }
          }
          if (flag) {
            clearInterval(elm.timeID);
          }
        }, 15);
      }

注意:

1.判断动画是否完成需要判断是否每个样式是否达到目标的位置

2.使用了假设法定义一个flag的状态值初始值为true 如果positon != obj[key] 成立的话就将flag的值改为false

最后判断flag为true的话那就停止定时器

3.获取现在的样式属性使用的是window.getComputedStyle(elm)[key] 是带有单位的

3.带有回调函数的版本(含有对象以及回调函数传入)

回调函数的调用

执行多个事件的时候调用方式

slowAnimation(
    elm,
    obj,
    function(){
        slowAnimation(
            elm,
            obj,
            sahai)
})

function slowAnimation(elm, obj, fun) {
        clearInterval(elm.timeID);
        elm.timeID = setInterval(function () {
          let flag = true;
          for (let key in obj) {
            let position = window.getComputedStyle(elm)[key];
            position = parseInt(position);
            let step =
              obj[key] - position > 0
                ? Math.ceil((obj[key] - position) / 10)
                : Math.floor((obj[key] - position) / 10);
            position += step;
            elm.style[key] = position + "px";
            if (position != obj[key]) {
              flag = false;
            }
          }
          if (flag) {
            clearInterval(elm.timeID);
            if (Object.prototype.toString.call(fun) == "[object Function]") {
              fun();
            }
          }
        }, 20);
      }

注意:

1.回调函数在清除定时器之后需要判断是否传入的是一个对象如果是的话才进行调用

 if (Object.prototype.toString.call(fun) == "[object Function]") {
          fun();
        }

4.对象中含有层级以及透明度的版本(z-index opacity)

 function slowAnimation(elm, obj, fun) {
        clearInterval(elm.timeID);
        elm.timeID = setInterval(function () {
          let flag = true;
          for (let key in obj) {
            if (key == "zindex") {
              elm.style[key] = obj[key];
            } else if (key == "opacity") {
              let position = window.getComputedStyle(elm)[key] * 100; 
              let step =
                obj[key] * 100 - position > 0
                  ? Math.ceil((obj[key] * 100 - position) / 10)
                  : Math.floor((obj[key] * 100 - position) / 10);
              position += step;
              elm.style[key] = position / 100; 
              if (position != obj[key] * 100) {
                flag = false;
              }
            } else {
              let position = window.getComputedStyle(elm)[key];
              position = parseInt(position);
              let step =
                obj[key] - position > 0
                  ? Math.ceil((obj[key] - position) / 10)
                  : Math.floor((obj[key] - position) / 10);
              position += step;
              elm.style[key] = position + "px";
              if (position != obj[key]) {
                flag = false;
              }
            }
          }
          if (flag) {
            clearInterval(elm.timeID);
            if (Object.prototype.toString.call(fun) == "[object Function]") {
              fun();
            }
          }
        }, 20);
      }

注意:

1.需要对key值进行判断是否分为z-index和opacity

2.如果是z-index的时候直接进行赋值就可以了

3.如果是opacity的话需要进一步处理

将position和obj[key]的值扩大一百倍求出step

将position += step 进行了处理之后再将positon的值缩小100倍之后赋值给elm.style[key]

4 最后还是判断 position != obj[key]*100 如果成立的话 flag为flase