Js封装缓冲动画

最新推荐文章于 2024-09-28 17:32:53 发布

AF01

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量288

点赞数

文章标签： javascript 动画前端

本文链接：https://blog.csdn.net/songJunFeng1/article/details/122800856

版权

本文介绍如何使用JavaScript构建一个函数animate，通过设置定时器逐步调整元素位置，直到目标位置，并在达到目标时执行回调。关键在于使用setInterval和Math.ceil/floor确保平滑过渡。

摘要由CSDN通过智能技术生成

const animate = (obj, target, callback) => {
    // console.log(obj, target, callback, '-----');
    clearInterval(obj.timer)
    var data1 = new Date()
    console.log(data1);
    obj.timer = setInterval(() => {
        var step = (target - obj.offsetLeft) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        console.log(obj.offsetLeft, target);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer)
            if (callback) {
                console.log(new Date() - data1);
                callback()
            }
        }
        obj.style.left = obj.offsetLeft + step + "px"
    }, 15)
}