js自写封装缓动动画函数

翻看以前学习内容发现与拿来封装了好多函数 记录一下

//缓动动画公式（目标值-现在位置）/10
function animation(obj, target,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // var step_size=Math.ceil((target-obj.offsetLeft)/10);考虑回来负值的原因
        //步长值要写在定时器里面
        //步长值要取整 且往大取 因为出现小数 移动的像素会不准确
        var step_size = (target - obj.offsetLeft) / 10;
        step_size = step_size > 0 ? Math.ceil(step_size) : Math.floor(step_size);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer); //停止动画本质是停止定时器
            //回调函数要在定时器结束时调用
            if(callback){
                callback();//如果有callback这个参数则调用
            }
        }
        obj.style.left = obj.offsetLeft + step_size + 'px';
    }, 15)
}

测试代码:

开始

<script>
    var btn=document.querySelector('button');
    var div=document.querySelector('div');
    btn.onclick=function(){
        animate(div,700);
    }
</script>

```

此处使用缓动动画的节点必须要有定位才能生效
演示结果: