[JavaScript] 动画函数的封装_js 帧动画封装-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49900295/article/details/123672666

本文详细讲解了JavaScript和CSS实现动画的原理，包括定时器、缓动动画和回调函数的运用。通过实例演示了如何封装动画函数，以及针对不同对象管理定时器和回调的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

动画实现原理
动画函数简单封装
给不同对象添加不同的定时器
- 核心原理：
- 代码示例：
缓动动画原理
动画函数添加回调函数
动画函数封装到单独js文件里面

当我们学习了动画之后，我们就能做各种各样的网页特效了。有的同学总是杠，js能做的动画css也能做。首先你是来学js的没必要杠，css的灵活度远不如js,其次做网页轮播图等特效时用js是不是方便的多

动画实现原理

核心原理：

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

实现步骤：

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

js的动画：

那么我们下面体会一下js的动画效果：
请添加图片描述

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
        div {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if(div.offsetLeft >= 800)
            {
                clearInterval(timer);
            }
            else {
                div.style.left = div.offsetLeft + 1 + 'px';
            }
        },10);
    </script>
</body>
</html>

css的动画：

再复习一下css的动画效果：
请添加图片描述

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <style>
        div {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 100px;
            height: 100px;
            background-color: pink;
            /* animation：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
			animation: move 3s ease 0s infinite alternate;
        }
        @keyframes move{
		    from{
			    left: 0;
			    background-color: pink;
		    }
		    to{
			    left: 1000px;
			    background-color: yellow;
		    }
		}
    </style>
</head>
<body>
    <div></div>
    <script>
    </script>
</body>
</html>

动画函数简单封装

因为我们的页面中需要用到大量的动画效果，所以能够封装成一个函数就非常方便了，注意函数需要传递两个参数，动画对象和移动到的距离

var div = document.querySelector('div');
        //obj目标对象，target目标位置
        function animate(obj,target) {
            var timer = setInterval(function() {
            if(obj.offsetLeft >= target)
            {
                clearInterval(timer);
            }
            else {
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }
            },10);
        }
animate(div,800);

这样封装完的就是一个简单的动画函数，和上例中的效果相同

给不同对象添加不同的定时器

在上例中我们每调用一次动画函数就会在内存中开辟一个空间，因为我们赋值了一个var 变量。这样的话浪费内存资源。其次，如果不同元素调用动画函数，但是在我们的函数里定时器都叫timer,这很容易引起歧义。所以，我们可以给不同的元素使用自己专用的自己的定时器

核心原理：

利用js是一门动态语言，可以很方便的给当前对象添加属性

因为我们的函数传递进来的obj就是一个对象，所以我们给他添加一个属性，就避免了内存资源的浪费。并且timer属性是专门属于obj对象的，div.timer就是div对象的定时器，span.timer就是span对象的定时器

代码示例：

var div = document.querySelector('div');
        //obj目标对象，target目标位置
        function animate(obj,target) {
            //先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
            if(obj.offsetLeft >= target)
            {
                clearInterval(obj.timer);
            }
            else {
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }
            },10);
        }
animate(div,800);

为什么在函数开头要加清除定时器呢，因为如果我们通过一个外部事件调用这个函数，比如点击一个按钮会调用动画函数，那如果我们不停的按这个按钮，那么就会给对象不停添加定时器，他就会越跑越快，所以在开头清除其他的定时器是必须的。

缓动动画原理

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

思路：

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

实现效果：

请添加图片描述

代码示例：

我们只需要在把代码做一点小小的改动：

<body>
    <button class="first">移动到500</button>
    <button class="second">移动到800</button>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var btn500 = document.querySelector('.first');
        var btn800 = document.querySelector('.second');
        //obj目标对象，target目标位置
        function animate(obj,target) {
            //先清除以前的定时器，只保留当前的一个定时器执行
            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);
            }
            else {
                obj.style.left = obj.offsetLeft + step + 'px';
            }
            },10);
        }
        btn500.addEventListener('click',function() {
            animate(div,500);
        })
        btn800.addEventListener('click',function() {
            animate(div,800);
        })
    </script>
</body>

动画函数添加回调函数

回调函数原理：

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

我们可以加一个函数作为参数
在这里插入图片描述
然后把这个参数传递给实参callback

也就是说，callback = function() { } 调用的时候callback()就可以

示例代码：

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);
                //回调函数写到定时器结束里面
                if(callback) {
                    callback();//调用函数
                }
            }
            else {
                obj.style.left = obj.offsetLeft + step + 'px';
            }
            },10);
        }
        btn500.addEventListener('click',function() {
            animate(div,500);
        })
        btn800.addEventListener('click',function() {
            animate(div,800,function(){
                alert('加油呀');
            });
})