缓动动画

110 阅读 0 评论 73 点赞

我是靠谱客的博主笑点低大雁，这篇文章主要介绍缓动动画，现在分享给大家，希望可以做个参考。

转自个人网站：https://www.jinxiaoliang.cn/

一、缓动动画原理

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

2.思路：

（1）让盒子每次移动的距离慢慢变小，盒子就会慢慢停下来

（2）核心算法：让**（目标值 - 盒子目前的位置）/ 10** 的值作为每次盒子移动的距离，当然这里的10可以换成其他数值。

（3）停止的条件就是目标值和盒子的距离一样就清除定时器。

二、基本的代码实现

1.先看效果图，如下图
在这里插入图片描述

实现步骤：

（1）html结构就是一个按钮和一个div盒子，并为其设置样式，代码如下

css:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
        button {
            width: 100px;
            margin-right: 10px;
            margin: 10px 0 ;
        }

html:

复制代码

1
2
3
4
<button class="btn500">btn200</button>
<div></div>

（2）js代码实现，步骤就是：获取需要操作的元素->封装一个动画函数->然后调用所封装的函数，将获取到的数值赋值给div的left值（需要注意的是div盒子必须添加position定位），代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        var btn500= document.querySelector('.btn500');//获取按钮
        var div = document.querySelector('div');//获取div盒子
        function animation(obj,target,callback) {//封装一个动画函数
            clearInterval(obj.timer);//一开始需要清理定时器，只需要一个定时器就行，如果不清楚定时器，定时器就会叠加。
            obj.timer= setInterval(function(){//添加定时器
                var step = (target - obj.offsetLeft)/10;//获取盒子每一次移动的距离
                step = Math.ceil(step);//Math.ceil()表示向上取整，因为每一次计算肯定会出现小数，然后我们不需要小数，小数会产生错误
                if (target == obj.offsetLeft){//判断，如果目标值和div的距离一样，就清除定时器。
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + step +'px';

            }, 15)
        }
        btn500.addEventListener('click',function(){//给按钮添加监听器，调用封装函数
            animation(div,500);//这里是实参，而封装函数里面的是形参，传递过去的是实参
        });

**NOTE:**需要注意的是这里添加定时器为什么是obj.timer，而不是var timer呢？？？

（1）使用var声明的变量会去申请一块内存，在这里我们每调用一次封装函数就要为定时器申请一块内存，这样就会导致性能不好。

（2）而用obj.timer就不会去单独申请内存，因为timer就可以认为是obj的一个属性。

三、缓动动画在多个目标值之间移动

1.效果图如下：

在这里插入图片描述
2.实现原理：

（1）添加一个新的button标签

（2）然后我们在封装函数中

复制代码

1
2
3
4
 step = Math.ceil(step);换成step = step > 0?Math.ceil(step):Math.floor(step);
 //因为在多个目标值之间移动，移动距离step会变成负数，负数我们则需要向下取整，
 因此我们需要做个判断，如果step>0就向上取整、否则就向下取整

四、给缓动动画添加回调函数

1.回调函数：函数可以作为一个参数，将这个函数作为参数可以传到另一个函数里面，当那个函数执行完之后，在执行传进去的这个函数。

2.添加回调函数之后，效果如下：
在这里插入图片描述

3.添加回调函数之后，代码如下：

复制代码

function animation(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 (target == obj.offsetLeft){
                    clearInterval(obj.timer);
                    //因为要在其他函数执行完之后才执行参数函数，因此在清除定时器之后再开始执行
                    if(callback)//判断是否有回调函数，如果有就调用
                        {
                            callback();
                        }
                }
                obj.style.left = obj.offsetLeft + step +'px';

}, 15)
        }
        btn500.addEventListener('click',function(){
            animation(div,500,function(){//函数
                div.style.background = 'red';
            });
        });

btn800.addEventListener('click',function(){
            animation(div,800,function(){//函数
                div.style.background = 'skyblue';
            });
        });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function animation(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 (target == obj.offsetLeft){
                    clearInterval(obj.timer);
                    //因为要在其他函数执行完之后才执行参数函数，因此在清除定时器之后再开始执行
                    if(callback)//判断是否有回调函数，如果有就调用
                        {
                            callback();
                        }
                }
                obj.style.left = obj.offsetLeft + step +'px';

            }, 15)
        }
        btn500.addEventListener('click',function(){
            animation(div,500,function(){//函数
                div.style.background = 'red';
            });
        });

        btn800.addEventListener('click',function(){
            animation(div,800,function(){//函数
                div.style.background = 'skyblue';
            });
        });