动画效果-JS

1、盒子的自动移动

 

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0px;
            top: 20px
        }
    </style>

    <div></div>
    <script>
        var div = document.querySelector('div')

        div.addEventListener('click', function() {
            var timer = setInterval(fn, [1000])
        })

        function fn() {
            var a = div.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset，修改永style
            div.style.left = a + 10 + 'px'
        }
    </script>

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

    <script>
        var div = document.querySelector('div')

        div.addEventListener('click', function() {
            var timer = setInterval(fn, [100])

        })

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

        }
    </script>

对动画函数进行封装

    <script>
        var div = document.querySelector('div')
        div.addEventListener('click', function() {
            animate(div, 100)
        })
        
        function animate(obj, target) {
            var timer = setInterval(fn, [100])

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



        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里面？）