动画函数

function animate(obj, target, callback) {

    //callback = function(){}

    //当我们不断点击按钮 这个元素的速度会越来越快 因为开辟了太多定时器

    //解决方案 让我们元素只有一个定时器

    //先清除以前的定时器 只保留当前的一个定时器执行

    clearInterval(obj.timer)

    obj.timer = setInterval(function() {

        //步长值写到定时器里面

        //把步长值改为整数 不要出现小数

        // var step = Math.ceil((target - obj.offsetLeft) / 10)

        var step = (target - obj.offsetLeft) / 10;

        step = step > 0 ? Math.ceil(step) : Math.floor(step)

        if (obj.offsetLeft == target) {

            clearInterval(obj.timer)

                //回调函数写到定时器里面

            if (callback) {

                callback()

            }

        }

        //把每次加1 这个步长改成缓慢的效果 公式(目标值-现在的位置)/10

        obj.style.left = obj.offsetLeft + step + 'px'

    }, 15)

}

作者:森屿灬

链接:https://www.jianshu.com/p/6af484feb52d

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容