动画效果-JS

1、盒子的自动移动

 

 

盒子移动到一定距离后清除定时器：

对动画函数进行封装

    



        var span = document.querySelector('span')
        animate(span, 500)

优化：

        function animate(obj, target) {
            obj.timer = setInterval(fn, [100])

            function fn() {
                var a = obj.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset，修改永style
                if (a >= target) {
                    //取消定时器
                    clearInterval(obj.timer)
                } //注意清除定时器写的位置，而且也不能永style
                obj.style.left = a + 10 + 'px'
            }
        }

避免var声明变量而开辟空间

bug：上面添加的div点击事件，点击了之后，才开始走。但是如果在走的过程中，再次点击div的话（重复定时器），速度就会加快

自己地想法：相当于第一次点击div才会启动定时器，后面再点击，是无效地
       var flag = 0
        div.addEventListener('click', function() { //当不断地点击按钮，这个元素地速度会越来越快，因为开启了太多地定时器，解决方案就是让元素只有一个定时器执行就行
            if (flag == 0) {
                animate(div, 500)
                flag++
            }

        })

当不断地点击按钮，这个元素地速度会越来越快，因为开启了太多地定时器，解决方案就是让元素只有一个定时器执行就行

先把原先地定时器清除之后，再开启另外一个新地定时器；这样就能保证当前元素始终只有一个定时器

        function animate(obj, target) {
            clearInterval(obj.timer) //先把原先地定时器清除之后，再开启另外一个新地定时器
            obj.timer = setInterval(fn, [100])

            function fn() {
                var a = obj.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset，修改永style
                if (a >= target) {
                    //取消定时器
                    clearInterval(obj.timer)
                } //注意清除定时器写的位置，而且也不能永style
                obj.style.left = a + 10 + 'px'
            }
        }

这种方法其实会有一个缓冲，就是如果100时间延长，或者短时间内连续多次点击div地话，会有一顿一顿的效果。（点击div，上一个定时器清除，下一个定时器开始，时间100毫秒。短时间内连续多次点，或进入100毫秒这个bug里面？）