动画函数封装

1.1 动画函数封装

1.1.1缓动效果原理

就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：
让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
停止的条件是： 让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整

1.1.2 动函数多个目标值之间移动

点击按钮判断正值还是负值
是正值：往大取整
负值：向小取整

1.2.3动函数添加回调函数

回调函数原理：函数可以作为一个参数，可以将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，在执行传进去的这个函数，这个过程就叫做回调。

1.2.4动画完整版代码

<button>小王快跑</button>
<span>小王</span>

<script>
    //封装动画函数
    function animate(obj,target,speed){
        //进入函数时，停止上一次的定时器,把time当做属性，交给obj
        clearInterval(obj.time)
        obj.time = setInterval(function(){
            //核心算法：（目标值 - 现在的位置）/ 10   作为每次移动的距离步长
            let step = (target - obj.offsetLeft) / 10
            if(obj.offsetLeft>=target){
                //停止动画
                clearInterval(time)
            }
            obj.style.left = obj.offsetLeft + step + 'px'
        },speed)
    }

    let btn = document.querySelector('button')
    let span = document.querySelector('span')

    btn.addEventListener('click',function(){
        animate(span,1000,100)
    })
</script>