前端学习笔记JavaScript - 缓动动画

缓动动画

• 预览图
  

缓动动画和匀速动画区别并不大，匀速动画的step是固定的，所以展示的效果就是匀速变化，随意缓动动画只要将step改为动态由多变少就可以了

• 缓动动画公式 缓动动画公式 （结束位置 - 起始位置）* 缓动系数（0~1）

      step = (target - begin) * 0.3;

同时判断条件也需要改变，不然计时器会一直执行

      if (Math.abs(Math.floor(step)) <= 1){
        // - 停止计时器
        clearInterval(timer);
        // - 赋值到起始位置
        begin = target;
      }

此时缓动动画就完成了

• 完成js代码

 begin500Btn.onclick = function () {
    linearAnimation(500,oBox);
  }

  begin200Btn.onclick = function () {
    linearAnimation(200,oBox);
  }

  // - 缓动动画
  /* target 需要动画的总距离
   * ele 需要动画的元素
   */
  function linearAnimation(target,ele) {
    // - 每次启动定时器前先移出定时器，防止定时器多次执行
    clearInterval(timer);
    // - 起始位置
    let begin = parseInt(getComputedStyle(ele).marginLeft);

    // - 开启定时器
    timer = setInterval(function () {
      // - 此处步数是可变的，所以放在定时器里面
      // - 缓动动画公式 （结束位置 - 起始位置）* 缓动系数（0~1）
      let step = (target - begin) * 0.3;
      // - 使用当前起始位置 + 每次移动距离 = 这次移动的距离
      begin += step;
      if (Math.abs(Math.floor(step)) <= 1){
        // - 停止计时器
        clearInterval(timer);
        // - 赋值到起始位置
        begin = target;
      }
      // - 移动位置
      ele.style.marginLeft = begin+"px";

    },100)
  }