投稿
  1. 极客之音首页
  2. 技术随笔

【JavaScript】动画函数

飞熊 • • 技术随笔 • 阅读 88

生活中，最使人疲惫的往往不是道路的遥远，而是心中的郁闷;最使人痛苦的往往不是生活的不幸，而是希望的破灭;最使人颓废的往往不是前途的坎坷，而是自信的丧失;最使人绝望的往往不是挫折的打击，而是心灵的死亡。所以我们要有自己的梦想，让梦想的星光指引着我们走出落漠，走出惆怅，带着我们走进自己的理想。

导读：本篇文章讲解 【JavaScript】动画函数，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🍇个人主页：亦世凡华、的博客

🍓系列专栏：JavaScript专栏

🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

目录

🏍️动画函数实现

🍇动画原理

🍈动画封装

🍉动画函数设置不同定时器

🍊缓动动画效果

🍋目标值之间移动

🍌动画函数添加回调函数

🍍动画函数封装到JS文件中

🏍️动画函数实现

🍇动画原理

核心原理：

通过定时器setInterval()不断移动盒子位置。

实现步骤：

1.获取盒子当前位置

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            left: 0;;
            width: 100px;
            height: 100px;
            background-color: #008c8c;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(function(){
            if(div.offsetLeft>=400){
                // 停止动画本质是停止定时器
                clearInterval(timer)
            }
            div.style.left = div.offsetLeft + 5 +'px';
        },30);
    </script>
</body>
</html>

【JavaScript】动画函数

🍈动画封装

函数需要传递两个参数，动画对象和移动到的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            left: 0;;
            width: 100px;
            height: 100px;
            background-color: #008c8c;
        }
        span{
            position: absolute;
            left: 0;
            top: 150px;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <script>
        //动画函数 obj目标对象；target目标位置
        function animate(obj,target){
            var timer = setInterval(function(){
                if(obj.offsetLeft>=target){
                    // 停止动画本质是停止定时器
                    clearInterval(timer)
                }
                obj.style.left = obj.offsetLeft + 4 +'px';
            },30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span')
        animate(div,300);
        animate(span,200);
    </script>
</body>
</html>

【JavaScript】动画函数

🍉动画函数设置不同定时器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            position: absolute;
            left: 0;;
            width: 100px;
            height: 100px;
            background-color: #008c8c;
        }
        span{
            position: absolute;
            left: 0;
            top: 150px;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <button>点击我span才走</button>
    <div></div>
    <span></span>
    <script>
        // 给不同元素指定不同的定时器
        function animate(obj,target){
            // 当我们不断点击按钮是时，span元素运动速度会越来越快，因为开启了太多定时器
            // 为了让元素只有一个定时器执行，我们要先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer)
            obj.timer = setInterval(function(){
                if(obj.offsetLeft>=target){
                    // 停止动画本质是停止定时器
                    clearInterval(obj.timer)
                }
                obj.style.left = obj.offsetLeft + 1 +'px';
            },30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span')
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            animate(span,200);
        })
        animate(div,300);
    </script>
</body>
</html>

【JavaScript】动画函数

🍊缓动动画效果

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

思路：

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

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

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

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

缓动动画：就是盒子当前位置 + 变化的值 ((目标值 – 现在位置) / 10）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            position: absolute;
            left: 0;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <button>点击我span才走</button>
    <span></span>
    <script>
        // 给不同元素指定不同的定时器
        function animate(obj,target){
            // 当我们不断点击按钮是时，span元素运动速度会越来越快，因为开启了太多定时器
            // 为了让元素只有一个定时器执行，我们要先清除以前的定时器，只保留当前的一个定时器执行
            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';
            },30);
        }
        var span = document.querySelector('span')
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            animate(span,200);
        })
    </script>
</body>
</html>

【JavaScript】动画函数

🍋目标值之间移动

如果是正值，步长往大取整

如果是负值，步长往小取整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            position: absolute;
            left: 0;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <button class="btn500">点击我span才走500</button>
    <button class="btn1000">点击我span才走1000</button>
    <span></span>
    <script>
        // 给不同元素指定不同的定时器
        function animate(obj,target){
            // 当我们不断点击按钮是时，span元素运动速度会越来越快，因为开启了太多定时器
            // 为了让元素只有一个定时器执行，我们要先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer)
            obj.timer = setInterval(function(){
                // 将步长改为整数
                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';
            },30);
        }
        var span = document.querySelector('span')
        var btn500 = document.querySelector('.btn500')
        var btn1000 = document.querySelector('.btn1000')
        btn500.addEventListener('click',function(){
            animate(span,500);
        })
        btn1000.addEventListener('click',function(){
            animate(span,1000);
        })
    </script>
</body>
</html>

【JavaScript】动画函数

🍌动画函数添加回调函数

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            position: absolute;
            left: 0;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <button>点击我span才走</button>
    <span></span>
    <script>
        // 给不同元素指定不同的定时器
        function animate(obj,target,callback){
            // 当我们不断点击按钮是时，span元素运动速度会越来越快，因为开启了太多定时器
            // 为了让元素只有一个定时器执行，我们要先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer)
            obj.timer = setInterval(function(){
                // 将步长改为整数
                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';
            },30);
        }
        var span = document.querySelector('span')
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            animate(span,500,function(){
                span.style.backgroundColor = '#008c8c'
                alert('看，现在颜色变了哟！')
            });
        })
    </script>
</body>
</html>

【JavaScript】动画函数

🍍动画函数封装到JS文件中

因为以后经常使用这个动画函数，可以单独封装到一个JS文件中，使用的时候引用即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            color: #fff;
        }

        .problem {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            background-color: #f00;
            z-index: -1;
        }
    </style>
    <script src="./animate.js"></script>
</head>

<body>
    <div class="box">
        <span>←</span>
        <div class="problem">问题反馈</div>
    </div>
    <script>
        // 1.获取元素
        var box = document.querySelector('.box')
        var problem = document.querySelector('.problem')
        // 当鼠标经过 box 就会让 problem 这个盒子滑倒左侧
        // 当鼠标离开 box 就会让 problem 这个盒子滑倒右侧
        box.addEventListener('mouseenter', function () {
            animate(problem,-160,function(){{
                // 当动画执行完毕,左键头改为右箭头
                box.children[0].innerHTML = '→';
            }})
        })
        box.addEventListener('mouseleave', function () {
            animate(problem,0,function(){
                // 当动画执行完毕,右键头改为左箭头
                box.children[0].innerHTML = '←';

            })
        })
    </script>
</body>

</html>

【JavaScript】动画函数

🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

【JavaScript】动画函数

呜呜~，原创不易。

【JavaScript】动画函数

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140092.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！