当前位置：网站首页>动画函数封装(缓动动画)

动画函数封装(缓动动画)

2022-07-20 03:37:00 【芋泥丶】

动画函数封装

动画实现原理

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

实现步骤：

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

动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

 function animate(obj, target) {
    
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
    
                if (obj.offsetLeft >= target) {
    
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

效果展示

在这里插入图片描述

源代码

<!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 {
       display: none; position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } .bBox {
       position: absolute; top: 180px; left: 0; width: 200px; height: 200px; background-color: plum; } </style>
</head>

<body>
    <button class="btn500">点击500</button>
    <button class="btn800">点击800</button>
    <div class="box"></div>
    <div class="bBox"></div>
    <script> function animate(obj, target, callback) {
       clearInterval(obj.timer); obj.timer = setInterval(function () {
       var x = (target - obj.offsetLeft) / 10; x = x > 0 ? Math.ceil(x) : Math.floor(x); if (obj.offsetLeft == target) {
       clearInterval(obj.timer); if (callback) {
       callback(); } } obj.style.left = obj.offsetLeft + x + 'px'; }, 15) }; var bBox = document.querySelector('.bBox'); var btn500 = document.querySelector('.btn500'); var btn800 = document.querySelector('.btn800'); btn500.addEventListener('click', function () {
       animate(bBox, 500); }) btn800.addEventListener('click', function () {
       animate(bBox, 800, function () {
       bBox.style.backgroundColor = 'pink'; // console.log(bBox.style.backgroundColor); }); }) </script>
</body>

</html>