时间：2019/10/22

5).动画函数封装
1.动画实现原理：通过定时器setInterval()不断移动盒子位置（具有定位属性的盒子）。停止动画本质是停止定时器。
2.动画函数简单封装（需要传递目标对象和目标位置两个参数）

<script type="text/javascript">
  var box = document.querySelector('.box');

  animate(box, 800);

  function animate(obj, target) {
    // 解决不断触发事件生成多个定时器问题
    if (obj.timer) clearInterval(obj.timer);
    // 给不同元素指定定时器，性能优化
   obj.timer = setInterval(function() {
      if (obj.offsetLeft == target) {
        clearInterval(obj.timer);
      } else {
        // 此时步长都为1，匀速效果运动
        obj.style.left = obj.offsetLeft + 1 + 'px';
      }
    }, 15);
  }
        
</script>

3.缓动动画原理：让盒子每次移动的距离慢慢变小，速度慢慢减小（减速效果）。
核心算法：（目标位置 - 当前位置）/ 10 值作为每次移动的的步长

function animate(obj, target) {
  if (obj.timer) clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var step = (target - obj.offsetLeft) / 10;
    if (step == 0) {
      clearInterval(obj.timer);
    } else {
      // 步长取整，避免因小数运算而达不到目标距离
      // 正向滑动，步长向上取整；反向滑动，步长向下取整
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      obj.style.left = obj.offsetLeft + step + 'px';
     }
  }, 15);
}

4.动画函数封装
PS：回调函数原理（将函数作为参数传递到另一个函数中，当另一个函数执行完之后，再执行传递进去的函数）

function animate(obj, target, callBack) {
  if (obj.timer) clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var step = (target - obj.offsetLeft) / 10;
    if (step == 0) {
      clearInterval(obj.timer);
      // 添加回调函数，存在时，在动画执行完之后执行(短路运算)
      callBack && callBack();
    } else {
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      obj.style.left = obj.offsetLeft + step + 'px';
    }
  }, 15);
}

5.轮播图案例思路：

功能简介.jpg

显示隐藏.jpg

底部圆钮.jpg

点击圆钮.jpg

左右按钮.jpg

按钮与圆钮联动.jpg

自动播放.jpg

PS：轮播图加上节流阀（定义flag变量），防止左右按钮快速点击使图片切换过快。
（执行某个事件函数时打开节流阀（flag = false），在某个回调中关闭节流阀（flag = true），每次触发事件时判断flag状态）

6.返回顶部案例思路：

页面滚动.jpg

动画返回顶部.jpg

7.筋斗云案例思路：

功能介绍.jpg

具体操作.jpg