js之pc端网页特效（3）简单动画1

目录

一、动画原理

二、简单动画函数封装

三、给不同元素记录不同定时器

---

一、动画原理

通过定时器setInterval()不断移动盒子距离，获取盒子当前位置offsetLeft，让盒子在当前位置加上移动距离(自己设定），利用定时器不断重读这个操作，加一个定时器结束的条件。

  var div = document.querySelector('div');
        var time = setInterval(function() {
            if (div.offsetLeft >= 400) { //结束的条件
                //停止动画本质是停止定时器
                clearInterval(time);
            }
            div.style.left = div.offsetLeft + 1 + 'px';//每次移动距离1，left有单位所以拼接px
        }, 30);

二、简单动画函数封装

如果一个页面中有多个元素都需要添加动画，我们一个个添加太麻烦，会有很多代码，我们可以将动画封装为一个函数，我们哪个元素使用就去调用。

封装函数需要两个参数，一个是动画对象，另一个是移动到的距离（目标）

 function animation(obj, target) {
            var time = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    //停止动画本质是停止定时器
                    clearInterval(time);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30);
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        animation(div, 300);
        animation(span, 100);

三、给不同元素记录不同定时器

上面二中，我们使用不同元素去调用这个函数，每调用一次，就会创建一个定时器，名字都叫time，容易引起歧义，我们可以使用obj.time。

如果我们想让第二个盒子在某个条件下才走，也可以添加别的事件后然后再调用这个函数。

比如点击了这个按钮后，span盒子才走，我们就可以这样写。

  btn.addEventListener('click', function() {
            animation(span, 100);
        })

但是如果单纯的向代码中只添加这个语句，会有一个小bug，就是在元素走动的时候，我们连续点击按钮，盒子会走得越来越快，这是因为我们每点击一次就调用了一个动画函数，就开启了一次定时器，开启了太多定时器了 ，解决方案就是让当前元素中只有一个定时器在运行，所以我们再建一个新的定时器之前添加一个清除定时器的操作。

 clearInterval(obj.time);
            obj.time = setInterval(function() {

二中代码还有一个小bug，就是我们停止了之后，如果再点击按钮，盒子会有抖动效果，因为到了停止条件我们也清除了定时器，但是还会执行下面移动距离+1的操作

  if (obj.offsetLeft >= target) {
                    //停止动画本质是停止定时器
                    clearInterval(time);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

改为

   if (obj.offsetLeft >= target) {
                    //停止动画本质是停止定时器
                    clearInterval(obj.time);
                    //return;
                } else {
                    obj.style.left = obj.offsetLeft + 1 + 'px';
                }
            }, 30);