WebAPIs-06：动画函数封装 + 触屏事件

￡神魔★判官ぃ 2022-12-16 09:28 178阅读 0赞

## 1.1. 动画函数封装 ##

### 1.1.1 缓动效果原理 ###

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

思路：

1.  让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2.  核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
3.  停止的条件是： 让当前盒子位置等于目标位置就停止定时器
4.  注意步长值需要取整

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { position: absolute; left: 0; top: 200px; display: block; width: 150px; height: 150px; background-color: purple; } </style>
    </head>
    
    <body>
      <button>点击夏雨荷才走</button>
      <span>夏雨荷</span>
      <script> /* 匀速动画 就是 盒子是当前的位置 + 固定的值 10 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10） 缓动动画函数封装obj目标对象 target 目标位置 思路： 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 */ function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { // 步长值写到定时器的里面 var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } var span = document.querySelector('span'); var btn = document.querySelector('button'); btn.addEventListener('click', function () { // 调用函数 animate(span, 500); }) </script>
    </body>
    
    </html>

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

可以让动画函数从 800 移动到 500。

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

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

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

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { position: absolute; left: 0; top: 200px; display: block; width: 150px; height: 150px; background-color: purple; } </style>
    </head>
    
    <body>
      <button class="btn500">点击夏雨荷到500</button>
      <button class="btn800">点击夏雨荷到800</button>
      <span>夏雨荷</span>
      <script> /* 匀速动画 就是 盒子是当前的位置 + 固定的值 10 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10） 缓动动画函数封装obj目标对象 target 目标位置 思路： 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 */ function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { /* 步长值写到定时器的里面 把我们步长值改为整数 不要出现小数的问题 var step = Math.ceil((target - obj.offsetLeft) / 10); */ var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } var span = document.querySelector('span'); var btn500 = document.querySelector('.btn500'); var btn800 = document.querySelector('.btn800'); btn500.addEventListener('click', function () { // 调用函数 animate(span, 500); }) btn800.addEventListener('click', function () { // 调用函数 animate(span, 800); }) </script>
    </body>
    
    </html>

### 1.1.3 动函数添加回调函数 ###

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

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

### 1.1.4 动画完整版代码: ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { position: absolute; left: 0; top: 200px; display: block; width: 150px; height: 150px; background-color: purple; } </style>
    </head>
    
    <body>
      <button class="btn500">点击夏雨荷到500</button>
      <button class="btn800">点击夏雨荷到800</button>
      <span>夏雨荷</span>
      <script> /* 缓动动画函数封装obj目标对象 target 目标位置 思路： 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 */ function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function () { /* 步长值写到定时器的里面，把我们步长值改为整数 不要出现小数的问题 var step = Math.ceil((target - obj.offsetLeft) / 10); */ var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 if (callback) { // 调用函数 callback(); } } // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } var span = document.querySelector('span'); var btn500 = document.querySelector('.btn500'); var btn800 = document.querySelector('.btn800'); btn500.addEventListener('click', function () { // 调用函数 animate(span, 500); }) btn800.addEventListener('click', function () { // 调用函数 animate(span, 800, function () { span.style.backgroundColor = 'red'; }); }) </script>
    </body>
    
    </html>

## 1.2. 常见网页特效案例 ##

### 1.2.2. 节流阀 ###

防止轮播图按钮连续点击造成播放过快。

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

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

开始设置一个变量var flag= true;

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

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

### 1.2.3. 案例：返回顶部 ###

1.  带有动画的返回顶部
2.  此时可以继续使用我们封装的动画函数
3.  只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了
4.  页面滚动了多少，可以通过 window.pageYOffset 得到
5.  最后是页面滚动，使用 window.scroll(x,y)

//1. 获取元素
            var sliderbar = document.querySelector('.slider-bar');
            var banner = document.querySelector('.banner');
            // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
            var bannerTop = banner.offsetTop
                // 当我们侧边栏固定定位之后应该变化的数值
            var sliderbarTop = sliderbar.offsetTop - bannerTop;
            // 获取main 主体元素
            var main = document.querySelector('.main');
            var goBack = document.querySelector('.goBack');
            var mainTop = main.offsetTop;
            // 2. 页面滚动事件 scroll
            document.addEventListener('scroll', function() { 
                    // console.log(11);
                    // window.pageYOffset 页面被卷去的头部
                    // console.log(window.pageYOffset);
                    // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                    if (window.pageYOffset >= bannerTop) { 
                        sliderbar.style.position = 'fixed';
                        sliderbar.style.top = sliderbarTop + 'px';
                    } else { 
                        sliderbar.style.position = 'absolute';
                        sliderbar.style.top = '300px';
                    }
                    // 4. 当我们页面滚动到main盒子，就显示 goback模块
                    if (window.pageYOffset >= mainTop) { 
                        goBack.style.display = 'block';
                    } else { 
                        goBack.style.display = 'none';
                    }
    
                })
                // 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方
            goBack.addEventListener('click', function() { 
                // 里面的x和y 不跟单位的 直接写数字即可
                // window.scroll(0, 0);
                // 因为是窗口滚动 所以对象是window
                animate(window, 0);
            });

### 1.2.4. 案例：筋头云案例 ###

1.  利用动画函数做动画效果
2.  原先筋斗云的起始位置是0
3.  鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可
4.  鼠标离开某个小li，就把目标值设为 0
5.  如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置

## 1.3. 触屏事件 ##

### 1.3.1. 触屏事件概述 ###

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

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

### 1.3.2. 触摸事件对象（TouchEvent） ###

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

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

触摸事件对象重点我们看三个常见对象列表：  
![在这里插入图片描述][20201019234956730.png_pic_center]  
`因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes`

### 1.3.3.案例：移动端拖动元素 ###

1.  touchstart、touchmove、touchend可以实现拖动元素
2.  但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches\[0\] 里面的pageX 和 pageY
3.  移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
4.  手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置
    
    拖动元素三步曲：
    
    （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
    
    （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
    
    （3） 离开手指 touchend:
    
    `注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();`

[20201019234956730.png_pic_center]: /images/20221123/3f70616f3cbf40edbc8ce4c2f5945d64.png