js之pc端网页特效缓冲动画（2）

最新推荐文章于 2022-09-18 16:59:02 发布

小白蛋挞

最新推荐文章于 2022-09-18 16:59:02 发布

阅读量560

点赞数 3

分类专栏： JavaScript 文章标签：动画 html5 javascript css3

本文链接：https://blog.csdn.net/m0_61547956/article/details/124623230

版权

本文详细讲解了JavaScript实现PC端网页的缓冲动画，包括缓冲动画原理、多个目标值移动、添加回调函数、问题反馈案例分析以及实际应用场景如品优购轮播图和节流阀的使用。通过实例介绍了如何创建平滑的动画效果和优化频繁触发的事件处理。

摘要由CSDN通过智能技术生成

一、缓冲动画原理

让元素的速度有所变化，最常见的是让速度慢慢停下。

原理：让盒子每次移动的距离越来越小，速度就会慢慢停下来，核心算法：（目标位置-当前位置）/10，作为每次移动的步长，比如目标位置是100，当前位置0，所以步长就会10...9、8、7...0，停止的条件，让当前盒子距离等于目标位置就停止计时器。

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

缓冲动画就是盒子当前的位置+变化的值

step(每次移动的距离）=(target- obj.offsetLeft)/10，停止的条件是if(target==obj.offsetLeft){

clearInterval(obj.time)}，否则盒子距离左侧的位置（obj.style.left，style属性可以修改值）=obj.offsetLeft+step+'px'，因为上次我们已经对函数进行了封装，所以我们直接调用即可animation(span,500)。

<button>点击夏雨荷才走</button>
    <span></span>
    <script>
        function animation(obj, target) {
            //当我们不断地点击按钮，这个元素的速度会越来越快。因为开启了太多的定时器
            //解决方案就是让我们元素只有一个定时器执行
            // 但是还有bug就是还会稍微走抖动那种，if中加return 或者加else
            clearInterval(obj.time);
            obj.time = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                if (obj.offsetLeft == target) {
                    //停止动画本质是停止定时器
                    clearInterval(obj.time);
                    //return;
                } else {
                    //把每次加1这个步长值改为一个慢慢变小的值
                    //每次调用定时器都要重新更改步长值，所以写道定时器的里面
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
            }, 15);
        }

        var span = document.querySelector('span');
        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {
                animation(span, 500);
            })
            //匀速动画就是盒子当前的位置+固定的值
            //缓动动画就是盒子当前的位置+变化的值
    </script>

二、缓冲动画多个目标值之间移动

可以让元素移动到目标值800的位置，再往回移动。给一个元素添加两个动画。

step = step > 0 ? Math.ceil(step) : Math.floor(step);这一句是避免有小数。

三、缓冲动画添加回调函数

回调函数原理：

回调函数可以作为动画函数的一个参数，当那一个函数执行完毕之后，再执行传进去的这个函数，这个过程就叫回调。

比如我们想让元素走到800之后，颜色变为红色，就可以这样写。

 animation(span, 800, function() {
                span.style.backgroundColor = 'red';
                //加引号
            });

四、动画函数的使用之问题反馈案例

鼠标经过箭头反向，并且问题反馈出现

鼠标离开回到初始状态

问题分析：

需要准备一个大盒子，里面包含箭头的小盒子span，还有问题反馈的盒子con，con盒子设置为绝对定位，设置left值刚好看不见，设置z-index=-1，让这个盒子在父盒子的下面。给父盒子添加鼠标经过事件，con传入动画函数中，传入目标值，同时添加回调函数，改变span.innerHTML使箭头反向。给父盒子添加鼠标离开事件，传入con,目标值，回调函数，箭头恢复，同时父盒子颜色变为灰色。

代码