动画实现原理与封装：从定时器到缓动动画详解-优快云博客

本文链接：https://blog.youkuaiyun.com/WanHuaEr/article/details/126637440

动画实现的原理

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

获得盒子当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left

实例：给盒子每30毫秒向右移动1px的且到400px停止的动画

<!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{
            width: 100px;
            height: 100px;
            background: purple;
            /*给元素添加定位*/
            position: absolute; 
            /* 确立定位的left值 */
            left: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //获取元素
        var div = document.querySelector('div');
        //利用定时器来重复操作
        var timer = setInterval(function(){
            if (div.offsetLeft >= 200){
                clearInterval(timer);
            }else{
                //用元素的offsetLeft获取元素在页面的位置并将元素的位置给予div的left
                div.style.left = div.offsetLeft + 1 + 'px';
            }
        },30)

    </script>
</body>
</html>

动画函数的简单封装

需要三个数值：对象速度结束值

实例：进行简单的函数封装及其优化

<!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{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <button>点击事件</button>
    <div></div>
    <script>
        function animation(obj,step,target){
            //清除上次点击未执行完毕的定时器 防止元素添加过多定时器
            clearInterval(obj.timer)
            //利用定时器来重复操作 并将函数返回给obj.timer
            obj.timer = setInterval(function(){
                if (obj.offsetLeft >= target){
                    clearInterval(obj.timer);
                }else{
                    //用元素的offsetLeft获取元素在页面的位置并将元素的位置给予div的left
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
        },30)
        }
        //获取元素
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        //创建btn的回调函数
        btn.addEventListener('click',function(){
            animation(div, 10, 500)
        });
    </script>
</body>
</html>

缓动动画

缓动动画的原理：

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
就是让步长 step发生有规律的变化
思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
4. 注意步长值需要取整

案例：让盒子的移动逐渐变慢

<!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{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <button>点击事件</button>
    <div></div>
    <script>
        function animation(obj,target){
            //清除上次点击未执行完毕的定时器 防止元素添加过多定时器
            clearInterval(obj.timer)
            //利用定时器来重复操作 并将函数返回给obj.timer
            obj.timer = setInterval(function(){
                //确定步长变化 将步长值取整 防止小数出现问题
                var step = Math.ceil((target - obj.offsetleft ) / 10 );
                if (obj.offsetLeft >= target){
                    clearInterval(obj.timer);
                }else{
                    //用元素的offsetLeft获取元素在页面的位置并将元素的位置给予div的left
                    obj.style.left = obj.offsetLeft + step + 'px';
                }
        },15)
        }
        //获取元素
        var div = document.querySelector('div');
        var btn = document.querySelector('button');
        //创建btn的回调函数
        btn.addEventListener('click',function(){
            animation(div, 500)
        });
    </script>
</body>
</html>

动画函数的封装

<!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{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <button class="btn500">500</button>
    <button class="btn800">800</button>
    <div></div>
    <script>
        function animation(obj,target,callback){
            //清除上次点击未执行完毕的定时器 防止元素添加过多定时器
            clearInterval(obj.timer)
            //利用定时器来重复操作 并将函数返回给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();
                   }  
                }
                    //用元素的offsetLeft获取元素在页面的位置并将元素的位置给予div的left
                    obj.style.left = obj.offsetLeft + step + 'px';
        },30)
        }
        //获取元素
        var div = document.querySelector('div');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800')
        //创建btn的回调函数
        btn500.addEventListener('click',function(){
            animation(div, 500,)
        });
        btn800.addEventListener('click',function(){
            //给animation 创建一个可以作为实参的回调函数
            animation(div, 800, function(){
                alert('你好吗');
                div.style.background = 'red';
            })
        });
    </script>
</body>
</html>