1. 动画函数封装
1.1 缓动效果原理
- 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。
1.2 思路
让盒子每次移动的距离慢慢变小，速度就会慢慢落下来；
核心算法：
(目标值 - 现在的位置) / 10 做为每次移动的距离步长；停止的条件是： 让当前盒子位置等于目标位置就停止定时器 ；
注意步长值需要取整 。
1.3 动画函数多个目标值之间移动
可以让动画函数从 800 移动到 500；
当我们点击按钮时候，判断步长是正值还是负值；
如果是正值，则步长往大了取整；
如果是负值，则步长 向小了取整。
案例：移动距离可以在 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 动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置。
2. 常见网页特效案例
2.1 案例：网页轮播图
- 网页轮播图：网页轮播图
2.2 节流阀
原因 ： 防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
开始设置一个变量
let flag= true;If(flag){flag = false; do something}关闭水龙头利用回调函数动画执行完毕，
flag = true打开水龙头
2.3 案例：返回顶部
2.4 案例：筋头云案例
- 案例：筋头云案例: 筋头云案例
3. 触屏事件
3.1 触屏事件概述
移动端浏览器兼容性较好，我们不需要考虑以前
JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android和IOS都有。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）
TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等touchstart、touchmove、touchend三个事件都会各自有事件对象。触摸事件对象重点我们看三个常见对象列表：
3.3 案例：移动端拖动元素
- 案例：移动端拖动元素: 移动端拖动元素
