1. 动画函数封装

1.1 缓动效果原理

1. 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。

缓动动画

1.2 思路

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来；

2. 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长；

3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 ；

4. 注意步长值需要取整 。

1.3 动画函数多个目标值之间移动

1. 可以让动画函数从 800 移动到 500；

2. 当我们点击按钮时候，判断步长是正值还是负值；

3. 如果是正值，则步长往大了取整；

4. 如果是负值，则步长 向小了取整。

案例：移动距离可以在 500 ~ 800

* {
      padding: 0;
      margin: 0;
    }

    div {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background-color: skyblue;
      margin-top: 100px;
    }

<button class="btn-500">播放动画 + 500</button>
<button class="btn-800">播放动画 + 800</button>
<div></div>

// 回调函数 : 等上一件事执行完毕之后再执行的函数
  // 回调函数写到定时器结束的位置
  let btn_500 = document.querySelector('.btn_500');
  let btn_800 = document.querySelector('.btn_800');
  let div = document.querySelector('div');

  function animation(ele, target, callback) {
    // 在每次设置定时器之前清除对象中的默认定时器
    // 注意1
    clearInterval(ele.timer);
    ele.timer = setInterval(() => {
      // 计算缓动动画 步长
      let step = (target - ele.offsetLeft) / 10;
      // 判断如果是正值就向上取整 ， 如果是负值就向下取整
      // 注意2
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      // 移动盒子
      ele.style.left = ele.offsetLeft + step + 'px';

      // 判断当前是否超出目标值 如果超出就清除定时器
      if (ele.offsetLeft === target) {
        clearInterval(ele.timer);
        // 在清除定时器之后 需要执行一个回调函数
        // 注意3
        if (callback) {
          callback();
        }
      }
    }, 10);
  }

  btn_500.addEventListener('click', function () {
    animation(div, 500, () => {
      div.style.backgroundColor = 'pink';
    });
  });

  btn_800.addEventListener('click', function () {
    animation(div, 800, () => {
      div.style.backgroundColor = 'purple';
    });
  })

  // 匀速动画 就是盒子当前的位置 + 固定值10

  // 缓动动画就是盒子当前的位置 + 变化的值（目标值  - 现在的值） / 10

1.4 动画函数添加回调函数

1. 回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

2. 回调函数写的位置：定时器结束的位置。

2. 常见网页特效案例

2.1 案例：网页轮播图

1. 网页轮播图：网页轮播图

2.2 节流阀

1. 原因 ： 防止轮播图按钮连续点击造成播放过快。

2. 节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

3. 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

4. 开始设置一个变量 let flag= true;

5. If(flag){flag = false; do something} 关闭水龙头

6. 利用回调函数动画执行完毕， flag = true 打开水龙头

2.3 案例：返回顶部

2.4 案例：筋头云案例

1. 案例：筋头云案例: 筋头云案例

3. 触屏事件

3.1 触屏事件概述

1. 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。

2. touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

常见的触摸事件

div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

<div></div>

 /**
   *
   * 1. 手指触摸DOM元素 touchstart
   *
   * 2. 手指在元素身上移动 touchmove
   *
   * 3. 手指离开了元素  touchend
   */
  let div = document.querySelector('div');

  div.addEventListener('touchstart', () => {
    console.log('我摸摸你!');
  })

  div.addEventListener('touchmove', () => {
    console.log('我拖动你!');
  })

  div.addEventListener('touchend', () => {
    console.log('我走了!');
  })

3.2 触摸事件对象（TouchEvent）

1. TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

2. touchstart、touchmove、touchend 三个事件都会各自有事件对象。

3. 触摸事件对象重点我们看三个常见对象列表：

触摸事件三种常见的对象

3.3 案例：移动端拖动元素

1. 案例：移动端拖动元素: 移动端拖动元素