JavaScript动画函数封装详解

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

一、动画函数原理

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

实现步骤：

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位，才能使用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动画函数封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

    下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性 ,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 200px; height

  • javascript实现左右缓动动画函数

    本文实例为大家分享了js实现左右缓动动画函数的封装代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-4.4.1.css" > <style> .box{ width: 100px; height: 100px;

  • JavaScript缓动动画函数的封装方法

    本文实例为大家分享了JavaScript缓动动画函数的封装代码,供大家参考,具体内容如下 本文将从封装缓动动画的以下几个部分进行封装(1.单个属性,2.多个属性,3.缓动框架之回调函数,4.缓动框架之层级与透明度) 首先:获取元素样式的兼容方式 function getStyle(ele,attr){ //获取任意类型的CSS样式的属性值 if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; }

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • JavaScript动画函数封装详解

    JavaScript动画函数封装详解

    目录 一.动画函数原理 二.动画函数简单封装 三. 动画函数给不同元素记录不同定时器 四.缓动效果原理 五. 动画函数在多个目标值之间移动 六.动画函数添加回调函数 一.动画函数原理 核心原理:通过定时器setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 如下所示: 给定一个盒子,让其慢慢移动到300px的位置. 代

  • JavaScript hasOwnProperty() 函数实例详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str

  • JavaScript CollectGarbage函数案例详解

    首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript"> <!-- strTest = "1"; for ( var i = 0; i < 25; i ++ ) { strTest += strTest; } alert(strTest); delete strTest; CollectGarbage(); //--> </SCRIPT> CollectGarbage,是IE的一个特有属性,用

  • Javascript this 函数深入详解

     js this 函数详解          本文对Javascript this函数进行详细介绍,及知识的总结整理,彻底明白js this 函数该如何使用. this 代码函数调用时, .1直接调用函数则为this则指向window对象 .2类调用时候指向这个类 .3 方法.apply(obg) :此时这个方法内部的this指向  obj 不传参数 则指向window .4 function 作为构造函数时, 内部this 指向这个新创建出来的对象 总结为 a类直构 this是JavaScri

  • jQuery自定义动画函数实例详解(附demo源码)

    jQuery自定义动画函数实例详解(附demo源码)

    本文实例讲述了jQuery自定义动画函数完整实现技巧.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-zdy-dh-move-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d

  • JavaScript自定义函数用法详解

    JavaScript自定义函数用法详解

    JavaScript中的函数分为两种:系统函数和自定义函数,这里主要讲解自定义函数. 自定义函数 1.语法: 注意: 传入的参数是可选的. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

  • JavaScript运动函数实例详解

    JavaScript运动函数实例详解

    运动函数是我们自己封装的一个函数. 作用是将css样式的改变不是一次性完成 是 逐步完成 执行效果 看上去 像是 动画/运动 完成的css样式改变. 实际项目中框架等都有自己的运动函数我们目前封装一个简单的兼容多属性的运动函数. 运动函数部分:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&quo

  • javascript some()函数用法详解

    参数说明 callback: 要对每个数组元素执行的回调函数. thisObject : 在执行回调函数时定义的this对象. 功能说明 对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false.它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略. 回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象. 如参数

  • JavaScript 常用函数库详解

    为此,收集了自己平时常用到一些JavaScript函数,它们在其它的JS库也常见,现在整理并附上注释,方便查阅,希望对大家有所帮助.注:假设以下所有函数都放在一个CC对象中,方便引用. 复制代码 代码如下: //这个方法相信是最常用的了, //它虽然没有选择器那么强大,但也有个小增强版,可查指定结点下ID所在的子元素 function $(id, p) { //id是否是字符串,还是一个HTML结点 var iss = id instanceof String || typeof id == "

  • JavaScript 节流函数 Throttle 详解

    JavaScript 节流函数 Throttle 详解

    在浏览器 DOM 事件里面,有一些事件会随着用户的操作不间断触发.比如:重新调整浏览器窗口大小(resize),浏览器页面滚动(scroll),鼠标移动(mousemove).也就是说用户在触发这些浏览器操作的时候,如果脚本里面绑定了对应的事件处理方法,这个方法就不停的触发. 这并不是我们想要的,因为有的时候如果事件处理方法比较庞大,DOM 操作比如复杂,还不断的触发此类事件就会造成性能上的损失,导致用户体验下降(UI 反映慢.浏览器卡死等).所以通常来讲我们会给相应事件添加延迟执行的逻辑. 通

随机推荐