js 实现抛物线

抛物线运动的基本原理

抛物线运动由水平匀速运动和垂直匀加速运动合成。水平方向速度恒定，垂直方向受重力影响速度逐渐增加。

使用 JavaScript 实现抛物线动画

通过设置元素的 position 为 absolute 或 fixed，动态修改 left 和 top 属性实现移动效果。

function parabolicMotion(element, startX, startY, endX, endY, duration) {
    const startTime = performance.now();
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    function updatePosition(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);

        // 水平匀速运动
        const x = startX + deltaX * progress;
        // 垂直抛物线运动（添加重力加速度）
        const y = startY + deltaY * progress + 0.5 * 9.8 * progress * progress;

        element.style.left = `${x}px`;
        element.style.top = `${y}px`;

        if (progress < 1) {
            requestAnimationFrame(updatePosition);
        }
    }

    requestAnimationFrame(updatePosition);
}

使用 CSS transform 优化性能

通过 transform 属性实现硬件加速，避免频繁触发重排。

function parabolicMotionWithTransform(element, startX, startY, endX, endY, duration) {
    const startTime = performance.now();
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    function updatePosition(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);

        const x = deltaX * progress;
        const y = deltaY * progress + 0.5 * 9.8 * progress * progress;

        element.style.transform = `translate(${x}px, ${y}px)`;

        if (progress < 1) {
            requestAnimationFrame(updatePosition);
        }
    }

    requestAnimationFrame(updatePosition);
}

贝塞尔曲线实现平滑抛物线

使用 cubic-bezier 定时函数模拟抛物线轨迹，适合 CSS 动画。

.parabola {
    transition: transform 1s cubic-bezier(0.1, 0.8, 0.2, 1);
}

物理参数调整

通过修改重力加速度系数控制抛物线弧度，数值越大下坠越明显。

const gravity = 15; // 调整重力系数
const y = startY + deltaY * progress + 0.5 * gravity * progress * progress;

实际应用示例

创建从左上角到右下角的抛物线动画：

const ball = document.getElementById('ball');
parabolicMotion(ball, 0, 0, 500, 300, 2000);