1. 首页
  2. WEB
  3. JavaScript

缓动动画

一、缓动动画原理

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

2.思路:

(1)让盒子每次移动的距离慢慢变小,盒子就会慢慢停下来

(2)核心算法:让(目标值 – 盒子目前的位置)/ 10 的值作为每次盒子移动的距离,当然这里的10可以换成其他数值。

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


二、基本的代码实现

1.先看效果图,如下图

my-logo.png

实现步骤:

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

css:

      
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #000;
        }
        button {
            width: 100px;
            margin-right: 10px;
            margin: 10px 0 ;
        }

html:

<button class="btn500">btn200</button>
<div></div>

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

  
    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.效果图如下:
my-logo.png

2.实现原理:

(1)添加一个新的button标签

(2)然后我们在封装函数中

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

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

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

2.添加回调函数之后,效果如下:
my-logo.png

3.添加回调函数之后,代码如下:

function animation(obj,target,callback) {//多了一个函数参数
            clearInterval(obj.timer);
            obj.timer= setInterval(function(){
                var step = (target - obj.offsetLeft)/10;
                step = step &gt; 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';
            });
        });

源码:点击下载缓动动画

原创文章,作者:Jack Jin,如若转载,请注明出处:https://www.jinxiaoliang.cn/468.html

发表评论

电子邮件地址不会被公开。

QR code