缓动动画函数的封装

 

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