js做缓动动画

function easeInOutQuad(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
}

function animate(element, targetPosition, duration) {
    const startPosition = element.offsetLeft;
    const distance = targetPosition - startPosition;
    const startTime = performance.now();

    function step(currentTime) {
        const elapsedTime = currentTime - startTime;
        const newPosition = easeInOutQuad(elapsedTime, startPosition, distance, duration);
        element.style.left = newPosition + 'px';

        if (elapsedTime < duration) {
            requestAnimationFrame(step);
        }
    }

    requestAnimationFrame(step);
}

// 使用示例
const box = document.getElementById('myBox');
animate(box, 500, 2000); // 将id为'myBox'的元素在2秒内移动到500px的位置