js弹性运动函数

function elasticMove(element, targetPosition, amplitude = 10, frequency = 1) {
    const startPosition = element.offsetLeft;
    const distance = targetPosition - startPosition;
    let velocity = distance * 0.1; // 初始速度
    const animationFrameId = requestAnimationFrame(animate);

    function animate() {
        element.style.left = startPosition + velocity + 'px';

        // 计算弹性效果
        velocity += (distance - velocity) * 0.2 - amplitude * Math.sin(frequency * velocity);
        amplitude *= 0.95; // 减少振幅，使动画逐渐停止

        if (Math.abs(velocity) < 0.5 && Math.abs(distance - velocity) < 0.5) {
            // 当速度和距离都足够小时，停止动画
            element.style.left = targetPosition + 'px';
            cancelAnimationFrame(animationFrameId);
        } else {
            animationFrameId = requestAnimationFrame(animate);
        }
    }
}

// 使用示例
const box = document.getElementById('box');
elasticMove(box, 300); // 将id为'box'的元素弹性移动到300px的位置