前端学习笔记JavaScript - 动画增强封装

动画封装

1. 增加多条动画同时执行
2. 将前进后退/放大缩小方法合并
3. 增加动画执行完成后回调方法
4. 将代码封装到动画类中

代码

• html代码

<button class="begin500">开始到500</button>
<button class="begin200">开始到200</button>
<button class="end">结束</button>
<div class="box"></div>
<div class="blue-box"></div>
<div class="red-box"></div>

• css代码

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: #E83733;
    }

    .blue-box,.red-box {
      height: 10px;
    }

    .blue-box {
      width: 500px;
      background-color: blue;
    }

    .red-box {
      width: 200px;
      background-color: red;
    }
  </style>

• 引入js文件

  <script src="js/animatin.js"></script>

• javascript代码

<script>
  // - 获取所有需要操作的元素
  let oBox = document.querySelector(".box");
  let begin500Btn = document.querySelector(".begin500");
  let begin200Btn = document.querySelector(".begin200");
  let endBtn = document.querySelector(".end");
  begin500Btn.onclick = function () {
    let obj = {
      "marginLeft":500,
      "width":200
    }
    easeAnimation(oBox,obj,function () {
      alert("动画执行完成");
    })
  }
  begin200Btn.onclick = function () {
    let obj = {
      "marginLeft":200
    }
    easeAnimation(oBox,obj,function () {
      alert("动画执行完成");
    })
  }

  endBtn.onclick = function () {

    clearInterval(oBox.timer)
  }
</script>

• 动画类

(
  function () {


    // - 匀速动画
    /* ele 需要动画的元素
     * obj 需要动画的属性
     * step 每次移动的距离/大小
     * fn 动画执行完成回调方法
     */
    function linearAnimation(ele,obj,step,fn) {
      // - 清空定时器
      clearInterval(ele.timer);
      ele.timer = setInterval(function () {
        let flag = true;
        for (let key in obj) {
          // - 获取初始位置
          let begin = parseInt(getComputedStyle(ele)[key]);
          step = begin - obj[key] > 0 ? -13:13;
          begin += step;

          if (Math.abs(begin - obj[key]) > Math.abs(step)){
            flag = false;
          }else
          {
            begin = obj[key];
          }
          ele.style[key] = begin+"px";
        }
        console.log(flag);
        if (flag) {
          clearInterval(ele.timer);
          fn && fn();
        }
      },100)
    }


    // - 缓动动画
    /* ele 需要动画的元素
     * obj 需要动画的属性
     * fn 动画执行完成回调方法
     */
    function easeAnimation(ele,obj,fn) {
      // - 每次启动定时器前先移出定时器，防止定时器多次执行
      clearInterval(ele.timer);
      // - 开启定时器
      ele.timer = setInterval(function () {
        // - 在计时器定义一个flag来记录是否已经完成动画
        let flag = true;
        // - 遍历obj中的值，执行动画
        for (let key in obj) {
          // - 起始位置
          let begin = parseInt(getComputedStyle(ele)[key]);
          // - 此处步数是可变的，所以放在定时器里面
          // - 缓动动画公式 （结束位置 - 起始位置）* 缓动系数（0~1）
          let step = (obj[key] - begin) * 0.3;
          // - 使用当前起始位置 + 每次移动距离 = 这次移动的距离
          begin += step;
          if (Math.abs(Math.floor(step)) > 1){
            // - 动画未完成
            flag = false;
          }else
          {
            // - 赋值到起始位置
            begin = obj[key];
          }
          // - 移动位置
          ele.style[key] = begin+"px";
        }
        console.log(flag);
        if (flag){
          // - 停止计时器
          clearInterval(ele.timer);
          // - 方法判空，如果有fn不为空才执行方法
          fn && fn();
        }
      },100)
    }

    window.linearAnimation = linearAnimation;
    window.easeAnimation   = easeAnimation;

  }
)()