JS动画原理

Pi皮蛋儿

于 2021-04-02 15:00:33 发布

阅读量266

点赞数

分类专栏： JS 文章标签：定时器缓动动画步长计算相对定位 setInterval

本文链接：https://blog.csdn.net/weixin_50723416/article/details/115396284

版权

JS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

动画盒子需要加定位 position：relative | absolute | fixed

动画函数封装 animate

缓动动画效果原理：使得元素运动有所变化。

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

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        
        .fff {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="fff"></div>
    <div class="box"></div>
    <button class="btn1">350</button>
    <button class="btn2">500</button>
    <script>
        // 点击按钮再移动
        // var obj = {}
        // obj.name = 'andy';
        // 简单动画函数封装obj对象 target 目标位置
        // obj 目标对象 target 移动距离
        function animate(obj, target, callback) {
            // 当不断点击按钮时,元素移动速度会越来越快,因为开启了太多定时器,
            // 解决方案:在开启定时器前先清楚定时器
            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);
                    // 回调函数 写在 定时器结束里面
                    callback();
                }
                // 把每次加1 这个值慢慢变小 步长值:(目标值-现在位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 20);
        };
        var box = document.querySelector('.box');
        var fff = document.querySelector('.fff');
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        btn1.addEventListener('click', function() {
            animate(box, 350);
        });
        btn2.addEventListener('click', function() {
            animate(box, 500, function() {
                alert('Hi~ o(*￣▽￣*)ブ')
            });
        });
        // 调用函数
        animate(fff, 200);
        // 匀速动画: 盒子当前位置 + 固定的值 10
        // 缓动动画: 盒子当前位置 + 步长值( (目标值- 现在位置)/10 )
    </script>
</body>

</html>