CSS实现抛物线动画思路解析

本篇文章给大家分享《CSS动画实现抛物线运动思路》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

纯CSS无法精确实现抛物线动画，因其@keyframes仅支持线性、缓动或分段关键帧，无法描述二次函数轨迹；推荐JS计算坐标+CSS硬件加速方案，或用两段cubic-bezier近似模拟。

用 transform + @keyframes 模拟抛物线不现实

纯 CSS 的 @keyframes 只支持线性、缓动（cubic-bezier）或分段关键帧，无法直接描述二次函数轨迹（如 y = ax² + bx + c）。强行用 20+ 个 top/left 关键帧逼近，不仅代码臃肿，还难以控制起止速度和物理感，且响应式下会错位。

推荐方案：CSS 配合 JS 控制 transform: translate()

让 JS 计算每个时间点的 x 和 y 坐标，再通过 element.style.transform = `translate(${x}px, ${y}px)` 实时更新。CSS 负责硬件加速（需开启 will-change: transform 或 transform: translateZ(0)），JS 负责数学逻辑。

• 抛物线公式建议用参数式：x = v₀ₓ × t，y = v₀ᵧ × t − 0.5 × g × t²（更贴近真实投掷）
• 时间 t 用 requestAnimationFrame 控制，避免 setInterval 掉帧
• 初始速度 v₀ₓ/v₀ᵧ 和重力 g 可调，比硬编码像素值更灵活
• 务必在动画开始前设置 element.style.transformOrigin = '0 0'，避免旋转类干扰

const ball = document.querySelector('.ball');
const duration = 1200; // ms
const g = 0.002;
const v0x = 2;
const v0y = -3;
<p>let startTime = null;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const t = currentTime - startTime;
if (t > duration) {
ball.style.transform = <code>translate(${v0x * duration}px, ${v0y * duration - 0.5 * g * duration ** 2}px)</code>;
return;
}
const x = v0x <em> t;
const y = v0y </em> t - 0.5 <em> g </em> t * t;
ball.style.transform = <code>translate(${x}px, ${y}px)</code>;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);</p>

如果必须纯 CSS：用 cubic-bezier 近似上升+减速+下坠

虽然不是数学意义的抛物线，但人眼对「先快后慢上升、再加速下落」有强感知。可用两个贝塞尔曲线拼接：前半段用 cubic-bezier(0.3, 1.2, 0.5, 1)（模拟上抛减速），后半段用 cubic-bezier(0.5, 0, 0.7, -0.2)（模拟下落加速）。注意：负的 y 值在贝塞尔中合法，但需确保容器 overflow: visible，否则裁剪。

• 不能只靠一个 cubic-bezier 覆盖全程——它只能表达单调变化，无法同时表现上升减速与下降加速
• 必须拆成两段动画，用 animation-fill-mode: forwards 衔接，且第二段 animation-delay 设为第一段时间
• top 或 transform 都可，但后者性能更好；若用 top，父容器需设 position: relative

容易被忽略的细节：坐标系方向与单位一致性

CSS 的 y 轴向下为正，而物理抛物线公式通常设向上为正。直接套用会导致球往天上飞。要么把公式里的 y 结果取负，要么把重力 g 设为正值并写成 y = -v₀ᵧ × t + 0.5 × g × t²。另外，JS 算出的像素值别直接拼进 transform 字符串——漏写 px 会静默失败；CSS 自定义属性（--x, --y）配合 calc() 是更健壮的传值方式，但兼容性需查 transform: translate(var(--x), var(--y)) 是否被支持。

本篇关于《CSS实现抛物线动画思路解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！