首页 > 资讯 > 前端开发 > JavaScript >JavaScript动画函数封装详解

384

分享到

JavaScript动画函数封装详解

2024-04-02 19:04:59 384人浏览八月长安

摘要

目录一、动画函数原理二、动画函数简单封装三、动画函数给不同元素记录不同定时器四、缓动效果原理五、动画函数在多个目标值之间移动六、动画函数添加回调函数一、动画函数原理核心原理：通

一、动画函数原理

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

实现步骤：

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

如下所示：

给定一个盒子，让其慢慢移动到300px的位置。

代码如下：


<style>
   div{
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: cyan;
    }
</style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = setInterval(function(){
            if(div.offsetLeft >= 300){
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 +'px';
        },30); 
    </script>
</body>

运行结果为：

运行成功。

但是如果同时有好几个元素都需要添加动画呢？我们就可以考虑将其封装成一个简单的动画函数。

二、动画函数简单封装

函数需要传递2个参数，动画对象和移动到的距离。如下所示：


 function animate(obj,target){
            var timer = setInterval(function(){
            if(obj.offsetLeft >= target){
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 1 +'px';
        },30);
        }

我们就可以通过调用上述封装的函数来实现动画效果。例如，给定两个不同的盒子，分别调用动画函数：


 <style>
       .box1{
            position: absolute;
            left: 0;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: cyan;
        }
        .box2{
            position: absolute;
            left: 0;
            top: 155px;
            width: 150px;
            height: 150px;
            background-color: deepskyblue;
        }
    </style>

<body>
   <div class="box1"></div>
   <div class="box2"></div>
    <script>
        function animate(obj,target){
            var timer = setInterval(function(){
            if(obj.offsetLeft >= target){
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 1 +'px';
        },30);
        }
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        animate(box1,300);
        animate(box2,400);
    </script>
</body>

效果为：

成功实现了动画的效果。

但是上面封装的动画函数还是有问题的，每当我们调用一次动画函数，就会给我们开辟一块内存空间，会造成浪费内存资源的问题，而且我们每次调用的动画函数都是以同一个名字命名的，很容易引起歧义，所以我们就可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

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

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

通过给对象添加属性的方法给给不同的元素添加定时器，我们可以将其进行如下的封装：


function animate(obj,target){
  obj.timer = setInterval(function(){
     if(obj.offsetLeft >= target){
         clearInterval(obj.timer);
     }
     obj.style.left = obj.offsetLeft + 1 +'px';
 },30);
}

当然，如果我们想要让某个元素在我们进行一系列操作后才实现动画效果的话，我们就可以给其添加特定事件，然后将函数调用写在事件中，

以第一个例子为例，给它添加点击事件，当点击按钮后，才让这个盒子发生移动：


 var box1 = document.querySelector('.box1');
        var btn = document.querySelector('button')
       btn.addEventListener('click',function(){
            animate(box1,300);
        })

效果为：

效果实现，但是如果我们一直点击按钮，会出现什么情况呢？

我们会发现，当我们不断点击按钮时，盒子运行的速度会越来越快，这是因为我们同时开启了太多定时器。该如何解决呢？方案就是让我们的元素先清除以前的定时器，只保留一个定时器执行，所以，我们就可以在函数的最上面添加一个清除定时器的操作。代码为：


  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);
        }
        var box1 = document.querySelector('.box1');
        var btn = document.querySelector('button');
       btn.addEventListener('click',function(){
            animate(box1,300);
        })

此时的运行效果为

成功实现。

通过上述一系列操作，我们可以发现，我们所实现的动画都是匀速的，为了让效果更加好看，我们可以让我们的动画以缓动的速度运行。

四、缓动效果原理

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

思路：让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
停止的条件：让当前盒子位置等于目标位置就停止定时器

注意步长值需要取整

以上个例子为例，当我们点击按钮时，让元素以缓动的速度移动，我们可以将封装的动画函数改为：


function animate(obj,target){
            clearInterval(obj.timer)
            obj.timer = setInterval(function(){
                var step = (target - obj.offsetLeft)/10;
            if(obj.offsetLeft == target){
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + step +'px';
        },30);
        }

实现效果为：

这样的效果是不是更好看了呢？但是我们来检查一下我们的元素具体移动了多大距离，是不是刚好到目标值300px的位置呢？

通过检查我们发现，我们的元素并没有到指定位置，这是因为我们的步长公式是有问题的，进行除法运算时，可能会有小数，从而导致位置的偏差，所以我们就需要对步长公式进行取整操作，由于元素是向前运动（正方向），所以我们采用的策略是向上取整：


 var step = Math.ceil((target - obj.offsetLeft)/10);

此时我们在来看看最终到达的目标位置是：

此时就刚好到达了目标位置。

五、动画函数在多个目标值之间移动

但是如果我们的步长为负呢？

举个例子，现在有一个盒子，给其添加两个按钮，一个让元素移动到400px的位置，一个让元素移动到700px：


function animate(obj,target){
    clearInterval(obj.timer)
     obj.timer = setInterval(function(){
         var step = Math.ceil((target - obj.offsetLeft)/10);
     if(obj.offsetLeft >= target){
         clearInterval(obj.timer);
     }
     obj.style.left = obj.offsetLeft + step +'px';
 },30);
}
 var box1 = document.querySelector('.box1');
 var btn = document.querySelectorAll('button')
 btn[0].addEventListener('click',function(){
     animate(box1,400);
 })
  btn[1].addEventListener('click',function(){
     animate(box1,700);
 })

实现效果为：

此时发现，当我们正向运动的时候，元素可以精确的到达目标位置，且元素也能实现在两个像素间移动的效果，但是向后退时达到的位置却并不是目标位置，这是因为我们的元素在倒退的时候，是属于反向运动的，这时我们也应该让步长向反向长的位置取整，即向下取整。

这时，我们应该对步长条件进行判断，如果步长大于零，则向上取整，如果步长小于零，则向下取整，调整后的步长公式为：


 var step =(target - obj.offsetLeft)/10;
 step > 0 ? Math.ceil(step) : Math.floor(step);

此时再来看看效果：

问题就解决了。

但是我们此时只是简单的实现了一个元素在两个位置的移动，如果我们想要在它移动后改变颜色，该如何操作呢？我们就可以通过给动画函数添加回调函数来实现。

六、动画函数添加回调函数

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

回调函数写的位置：定时器结束的位置。

具体实现代码为：


 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();
                } 
            }
            obj.style.left = obj.offsetLeft + step +'px';
            },30);
        }
        var box1 = document.querySelector('.box1');
        var btn = document.querySelectorAll('button');
       btn[0].addEventListener('click',function(){
            animate(box1,400,function(){
                box1.style.backgroundColor = 'pink';
            });
        })
        btn[1].addEventListener('click',function(){
            animate(box1,700,function(){
                box1.style.backgroundColor = 'red';
            });
        })

实现效果为：

以上就是动画函数的封装，在具体使用的时候，我们就可以将其封装成一个js文件，需要的时候就可以直接引用。

到此这篇关于javascript动画函数封装详解的文章就介绍到这了,更多相关JavaScript动画函数封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript动画函数封装详解

本文链接: https://www.lsjlt.com/news/160796.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

JavaScript动画函数封装详解

目录

一、动画函数原理

二、动画函数简单封装

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

四、缓动效果原理

五、动画函数在多个目标值之间移动

六、动画函数添加回调函数

本篇文章演示代码以及资料文档资料下载

JavaScript动画函数封装详解

JavaScript详解缓动动画的封装与使用

JavaScript动画函数封装的示例分析

JavaScript函数封装的示例详解

Flutter封装组动画混合动画AnimatedGroup示例详解

JavaScript变速动画函数封装添加任意多个属性

如何理解JavaScript缓动动画的封装与使用

详解Angular路由动画及高阶动画函数

JavaScript封装axios的实现详解

JavaScript axios安装与封装案例详解

JavaScript函数怎么封装和使用

Vue3封装 Message消息提示实例函数详解

JavaScript运动函数实例详解

好程序员分享JavaScript事件委托代理和函数封装详解

JavaScript封装Vue-Router实现流程详解

JavaScript前端实用的工具函数封装

详解C语言中函数宏的三种封装方式

Python学习之私有函数,私有变量及封装详解

Python封装数据库连接池详解

JavaScript函数语法详解

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

细说JS数组遍历的一些细节及实现

深入浅出JavaScript前端中的设计模式

初学者如何快速搭建Express开发系统步骤详解

JavaScrip简单数据类型隐式转换的实现

前端Website sitemap.xml文件搜索引擎优化

vue使用Swiper踩坑解决避坑

JavaScript动画函数封装详解

目录

一、动画函数原理

二、动画函数简单封装

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

四、缓动效果原理

五、 动画函数在多个目标值之间移动

六、动画函数添加回调函数

本篇文章演示代码以及资料文档资料下载

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

五、动画函数在多个目标值之间移动