JavaScript之动画特效

 一、PC端网页特效

1.1.元素偏移量offset系列

1.1.1.offset概述

offset翻译过来就是偏移量，使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

1.获得元素距离带有定位父元素的位置

2.获得元素自身的大小(宽度高度)

注意：返回的数值都不带单位。

offset系列常用属性：

element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body。

element.offsetTop：返回元素相对带有定位父元素上方的偏移。

element.offsetLeft：返回元素相对带有定位父元素左边框的偏移。

element.offsetWidth：返回自身包括padding、边框、内容区的宽度，返回数值不带单位。

element.offsetHeight：返回自身包括padding、边框、内容区的高度，返回数值不带单位。

1.1.2.offset与style区别

offset：

        1.offset可以得到任意样式表中的样式值

        2.offset系列获得的数值是没有单位的

        3.offsetWidth包含padding+border+width

        4.offsetWidth等属性是只读属性，只能获取不能赋值

        5.所以，想要获取元素大小位置，用offset更合适

style：

        1.style只能得到行内样式表中的样式值

        2.style.width获得的是带有单位的字符串

        3.style.width获得不包含padding和border的值

        4.style.width是可读写属性，可以获取也可以赋值

        5.所以，想要给元素更改值，则需要用style改变

1.2.元素可视区client系列

client翻译过来就是客户端，使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

element.clientTop：返回元素上边框的大小。

element.clientLeft：返回元素左边框的大小。

element.clientWidth：返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位。

element.clientHeight：返回自身包括padding、内容区的高度，不含边框，返回数值不带单位。

立即执行函数：(function() {})() 或者 (function() {}());

下面三种情况都会刷新页面都会触发load事件：

1.a标签的超链接

2.F5或者刷新按钮(强制刷新)

3.前进后退按钮

但是火狐中，有个特点，有个"往返缓存"，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。所以此时后退按钮不能刷新页面。

此时可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中，pageshow会在load事件触发后触发，根据事件对象的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加。

1.3.元素滚动scroll系列

1.3.1.元素scroll系列属性

scroll翻译过来就是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

element.scrollTop：返回被卷去的上侧距离，返回数值不带单位。

element.scrollLeft：返回被卷去的左侧距离，返回数值不带单位。

element.scrollWidth：返回自身实际的宽度，不含边框，返回数值不带单位。

element.scrollHeigth：返回自身实际的高度，不含边框，返回数值不带单位。

1.3.2.mouseenter和mouseover的区别

mouseenter鼠标事件

• 当鼠标移动到元素上时就会触发mouseenter事件
• 类似mouseover，它们两者之间的差别是
• mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
• 之所以这样，就是因为mouseenter不会冒泡
• 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

1.4.动画函数封装

1.4.1.动画实现原理

核心原理：通过定时器setInterval()不断移动盒子位置。

实现步骤：

        1.获得盒子当前位置

        2.让盒子在当前位置加上1个移动距离

        3.利用定时器不断重复这个操作

        4.加一个结束定时器的条件

        5.注意此元素需要添加定位，才能使用element.style.left

1.4.2.动画函数简单封装

<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>
<div></div>
<span></span>
<script>
    // 注意函数需要传递2个参数，动画对象和移动到的距离
    function animate(obj, target) {
        var timer = setInterval(function () {
            if (obj.offsetLeft >= target) {
                // 停止动画
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 1 + 'px';
        }, 3)
    }

    var div = document.querySelector('div');
    var span = document.querySelector('span');

    // 调用函数
    animate(div, 600);
    animate(span, 500);
</script>

1.4.3.动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。

把var timer/timer替换成obj.timer

1.4.4.缓动效果原理

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

思路：

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

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

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

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

1.4.5.动画函数添加回调函数

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

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

<style>
    div {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<button>点击500px</button>
<button id="d1">点击800px</button>
<div></div>
<script>
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            // Math.ceil()：往上取值；Math.floor()：往下取值
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                if (callback) {
                    // 回调函数
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 50)
    }

    var div = document.querySelector('div');
    var btn500 = document.querySelector('button');
    var btn800 = document.getElementById('d1');
    // 调用函数
    btn500.addEventListener('click', function () {
        animate(div, 500, function () {
        });
    });
    btn800.addEventListener('click', function () {
        animate(div, 800, function () {
            div.style.backgroundColor = 'red';
        });
    });
    // 匀速动画就是 盒子是当前的位置 + 固定的值 10
    // 缓动动画就是 盒子当前位置 + 变化的值(目标值 - 现在的位置) / 10
</script>

1.5.节流阀

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

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

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

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

if (flag) {flag = false; do somethins}         关闭

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

二、移动端网页特效

2.1.触碰事件

2.1.1.触屏事件概述

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

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

touchstart：手指触摸到一个DOM元素时触发。

touchmove：手指在一个DOM元素上滑动时触发。

tiuchend：手指从一个DOM元素上移动时触发。

2.1.2.触摸事件对象(TouchEvent)

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

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

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

touches：正在触摸屏幕的所有手指的一个列表。

targetTouches：正在触摸当前DOM元素上的手指的一个列表。

changedTouches：手指状态发生了改变的列表，从无到有，从有到无变化。

2.1.3.移动端拖动元素

1.touchstart、touchmove、touchend可以实现拖动元素。

2.但是拖动元素需要当前手指的坐标值，可以使用targetTouches[0]里面的pageX和pageY。

3.移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离。

4.手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置。

拖动元素三部曲：

(1).触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置。

(2).移动手指touchmove：计算手指的滑动距离，并且移动盒子。

(3).离开手指touchend

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();

2.2.移动端常见特效

2.2.1.click延迟时解决方案

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放(double tap to zoom)页面。

解决方案：

1.禁止缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<meta name="viewport" content="user-scalable-no">

2.利用touch事件自己封装这个事件解决300ms延迟。

原理就是：

        1.当手指触摸屏幕，记录当前触摸时间

        2.当手指离开屏幕，用离开的时间减去触摸的时间

        3.如果时间小于150ms，并且没有滑动过屏幕，那么就定义为点击

// 封装tap，解决click 300ms延时
function tap(obj, callback) {
    var isMove = false;
    var startTime = 0;    // 记录触摸时候的时间变量
    obj.addEventListener('touchstart', function (e) {
        startTime = Date.now();    // 记录触摸时间
    });
    obj.addEventListener('touchmove', function (e) {
        isMove = true;    // 看看是否有滑动，有滑动算拖拽，不算点击
    });
    obj.addEventListener('touchend', function (e) {
        if (!isMove && (Date.now() - startTime) < 150) {   // 如果手指触摸和离开时间小于150ms算点击
            callback && callback();   // 执行回调函数
        }
        isMove = false;   // 取反重置
        startTime = 0;
    })
}

// 调用
tap(div, function () { 
    // 执行代码 
});

2.3.移动端常用开发插件

移动端要求是快速开发，所以经常会借助于一些插件来完成操作。

JS插件是js文件，它遵循一定规范编写，方便程序展示效果，用有特定功能且方便调用。如轮播图和瀑布流插件。

特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

fastclick插件解决300ms延迟。使用延时

GitHub官网地址：https://github.com/ftlabs/fastclick

Swiper插件：https://www.swiper.com.cn/

superslide：http://www.superslide2.com/

iscroll：https://github.com/cubiq/iscroll

2.4.移动端常用开发框架

框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端，也能开发移动端。

前端常用的移动端插件有swiper、superslide、iscroll等。

框架：大而全，一整套解决方案

插件：小而专，某个功能的解决方案

三、本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性：

1.数据存储在用户浏览器中

2.设置、读取方便、甚至页面刷新不丢失数据

3.容量较大，sessionStorage约5M、localStorage约20M

4.只能存储字符串，可以将对象JSON.stringify()编码后存储

3.1.window.sessionStorage

1.生命周期为关闭浏览器窗口

2.在同一个窗口(页面)下数据可以共享

3.以键值对的形式存储使用

存储数据：sessionStorage.setItem(key,value)

获取数据：sessionStorage.getItem(key)

删除数据：sessionStorage.removeItem(key)

删除所有数据：sessionStorage.clear()

3.2.window.localStorage

1.生命周期永久生效，除非手动删除，否则关闭页面也会存在

2.可以多窗口(页面)共享(同一浏览器可以共享)

3.以键值对的形式存储使用

存储数据：localStorage.setItem(key,value)

获取数据：localStorage.getItem(key)

删除数据：localStorage.removeItem(key)

删除所有数据：localStorage.clear()