缓封动画的原理和封

╰+攻爆jí腚メ 2022-12-28 01:36 111阅读 0赞

# 学习目标：网页轮播图的实现 #

1.offset .client. scroll 三大家族  
2.缓动动画的原理和封  
3.网页轮播图实现  
4.节流阀 返回顶部及筋斗云案例  
5.移动端轮播图实现  
6.移动端插件使用 及轮播图的实现  
7.html5本地储存及记住用户名案例

# 学习内容： #

## 1.mouseover与mouseenter的区别 ##

**mousedown才是鼠标按下触发**

（1）当鼠标移动到元素上时就会触发mouseenter事件  
（2）类似mouseover ，但是二者有差别  
（3) mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。  
mouseenter 只会经过自身盒子触发  
（4）因为mouseenter不会冒泡 。 mouseover会冒泡  
(5) 跟mousrenter搭配使用的mouseleave 同样不会冒泡

//给父亲添加一个事件
    father.addEventListener ( 'mouseover' , function() {
    	alert(11);
    }
    //输出：mouseover经过子盒子，因为会冒泡，所以会执行父盒子的函数（冒泡：son~father~body~html~document)

## 2.动画原理 ##

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

实现步骤：  
（1）获得盒子当前的位置。  
（2）让盒子在当前位置上加1个移动距离。  
（3）利用定时器不断重复这个操作。

## 3.简单动画封装 ##

//animate:动画    target:目标
     function animate(obj, target) {
                var timer = window.setInterval(function () {
                    if (obj.offsetLeft >= target) {
                        //停止动画（停止定时器）
                        clearInterval(timer);
                    } 
                    obj.style.left = obj.offsetLeft + 5 + 'px';
                    
                }, 500);
            }
            var div = document.querySelector('div');
    
            //调用函数(这里是普通函数)
    
            animate(div, 400);

## 5.动画函数-给不同元素记录不同的定时器 ##

1.给不同的元素记录不同的定时器

首先给对象添加属性的方法

//给对象添加属性
             var obj = {};
             obj.name= 'a';

其次

2.会有bug 当你给动画加了执行按钮，重复点击按钮时，元素的速度会越来越快  
（因为开启了太多的定时器）

<body>
        <button>运行</button>
        <div></div>
        <script>
    
            // //给对象添加属性
            //  var obj = {};
            //  obj.name= 'a';
            
            function animate(obj, target) {
                //运行时先清除定时器
                clearInterval(obj.timer);
                obj.timer = window.setInterval(function () {
                    //用obj.timer 相比var timer的好处： 1.只是给obj添加了一个属性不会开辟新的空间消耗内存 
                    //var声明会占内存 2.每个对象都有自己独立的定时器了
                    if (obj.offsetLeft >= target) {
                        //停止动画（停止定时器）
                        clearInterval(obj.timer);
                    } 
                     obj.style.left = obj.offsetLeft + 10 + 'px';
                    
                }, 30);
            }
            var div = document.querySelector('div');
            var btn = document.querySelector('button');
    
            //调用函数(这里是普通函数)
    
            btn.addEventListener('click',function() {
                animate(div,400);
            })
    
    
        </script>
    </body>

重点

function animate(obj, target) {
                //运行时先清除定时器
                clearInterval(obj.timer);
                obj.timer = window.setInterval(function () {

## 6.缓动函数原理 ##

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

（1）让盒子每次移动的距离慢慢变小，速度就会慢慢落下来  
（2）核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长  
（3）停止的条件：让当前的盒子位置等于目标位置就停止定时器

<button>运行</button>
        <div></div>
        <script>
            // （1）让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
            // （2）核心算法：（目标值-现在的位置）/10   作为每次移动的距离步长
            function animate(obj, target) {
    
                //运行时先清除定时器
                clearInterval(obj.timer);
    
                obj.timer = window.setInterval(function () {
    
                    //步长值写在定时器的里面(随着改变的)
    
                    var step = (target - obj.offsetLeft)/10;
    
                    if (obj.offsetLeft >= target) {
                        clearInterval(obj.timer);
                    } 
                     obj.style.left = obj.offsetLeft + step + 'px';
                    
                }, 50);
            }
            var div = document.querySelector('div');
            var btn = document.querySelector('button');
            //调用函数(这里是普通函数)
    
            btn.addEventListener('click',function() {
                animate(div,400);
            })
        </script>

匀速动画：盒子当前的位置 + 固定的值  
缓动动画： 盒子当前的位置 + 慢慢变小的值

但是有bug，即盒子在按钮点击后并没有在400停下，而是395.5：（有了小数就无法达到目标值）——把步长值改为整数，不要出现小数的问题。

/把步长值改为整数，不要出现小数的问题。
                    //取整步长值Math.ceil  向上取整数
                    var step = Math.ceil((target - obj.offsetLeft)/10);

## 7.缓动动画多个目标值之间移动 ##

使盒子在400~800间来回移动

<body>
        <button class="btn400">运行到400</button>
        <button class="btn800">运行到800</button>
        <div></div>
        <script>
            // （1）让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
            // （2）核心算法：（目标值-现在的位置）/10   作为每次移动的距离步长
            function animate(obj, target) {
    
                //运行时先清除定时器
                clearInterval(obj.timer);
    
                obj.timer = window.setInterval(function () {
    
                    //步长值写在定时器的里面(随着改变的)
                    //把步长值改为整数，不要出现小数的问题。
                    //取整步长值    往上取整Math.ceil  往下取整Math.floor
    
                    
                    //前进的时候   步长取整  8.1 取 9   往大了取
                    //返回的时候，步长取整是负数，-8.1  应该取-9 ，往小了取
    
                    var step =(target - obj.offsetLeft)/10;
    
                    //加判断条件，step是正是负
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    
                    if (obj.offsetLeft == target) {//这里不能用>= 得用==  不然没法回来
                        clearInterval(obj.timer);
                    } 
                     obj.style.left = obj.offsetLeft + step + 'px';
                    
                }, 50);
            }
            var div = document.querySelector('div');
            var btn400 = document.querySelector('.btn400');
            var btn800 = document.querySelector('.btn800');
            //调用函数(这里是普通函数)
    
            btn400.addEventListener('click',function() {
                animate(div,400);
            })
    
            btn800.addEventListener('click',function() {
                animate(div,800);
            })
        </script>
    
    </body>

## 8.给缓动动画添加回调函数 ##

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

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

重点

1. function animate(obj, target,callback) {
    2.    clearInterval(obj.timer);
                        //回调函数写到定时器里面  定时器结束才执行回调函数
                        if (callback) {
                            //调用函数
                            callback();
                        }
    3.btn800.addEventListener('click',function() {
                animate(div,800,function() {});
            })

## 9.动画函数的使用 ##

（1）动画函数封装到一个单独的Js文件，使用的时候可以引用这个函数

注意offsetleft返回以带定位父元素的偏移值（父元素有定位，返回与父元素的偏移值）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .sliderbar {
                position: fixed;
                right: 0;
                bottom: 100px;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                color: #fff;
            }
    
            .con {
                /* 父亲加了固定定位，以父亲为准 */
                position: absolute;
                left: 0;
                top: 0;
                width: 200px;
                height: 40px;
                background-color: purple;
                z-index: -1;
            }
        </style>
    
        <script src="animate.js"></script>
    </head>
    
    <body>
        <div class="sliderbar">
            <span>←</span>
            <div class="con">问题反馈</div>
        </div>
    
        <script>
            var sliderbar = document.querySelector('.sliderbar');
            var con = document.querySelector('.con');
            sliderbar.addEventListener('mouseenter', function() {//不会冒泡
                animate(con,-160,function() {
                    //当我们动画执行完毕，就把⬅改为➡
                    sliderbar.children[0].innerHTML = '➡';
                })//没有callback就直接忽略
                
                
            })
    
            sliderbar.addEventListener('mouseleave', function() {//不会冒泡
                animate(con,0,function() {
                    //当我们动画执行完毕，就把⬅改为➡
                    sliderbar.children[0].innerHTML = '➡';
                })//没有callback就直接忽略
                
                
            })
    
        </script>
    
    </body>
    
    </html>

重点

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQwMTAwNA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQwMTAwNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8feb88552cae477991c25b254677d562.png