5分钟搞懂自由落体运动公式：前端速查手册避坑指南

配置环境就卡半天，这种痛苦我太懂了。刚接触物理引擎模拟或者做教育类前端项目时，很多人对着牛顿第二定律发呆，连最基本的位移和时间关系都搞混，导致动画逻辑全错。别急，这篇速查手册就是为你准备的，专门解决那些“看着公式觉得简单，写代码就报错”的尴尬局面。

我们不需要成为物理学家，只需要掌握自由落体运动公式的核心逻辑，就能在前端中精准还原现实世界的物理效果。很多教程喜欢堆砌理论，但实际开发中，我们更关心的是：怎么把 \(h = \frac{1}{2}gt^2\) 这行数学式子，翻译成 JavaScript 能跑的代码？单位换算怎么处理？浏览器渲染帧率波动怎么补偿？

概念速懂：别被术语劝退

在写第一行代码前，咱们得先对齐认知。所谓自由落体运动，指的是物体只在重力作用下，从静止开始下落的运动。这里有两个关键约束，也是前端模拟时最容易出错的地方：

初速度为零：\(v_0 = 0\)。如果物体是被扔下去的，那叫竖直下抛，公式就不一样了。
忽略空气阻力：在理想模型中，加速度恒定为重力加速度 \(g\)。在地球表面，通常取 \(g \approx 9.8 \, m/s^2\)。

对于前端开发者来说，最核心的三个公式如下表所示。建议直接收藏这张表，它是你调试代码时的速查手册：

物理量	公式符号	物理含义	前端映射变量建议
下落高度	\(h = \frac{1}{2}gt^2\)	位移与时间的平方成正比	`height`, `yPosition`
瞬时速度	\(v = gt\)	速度与时间成正比	`velocity`, `vy`
落地时间	\(t = \sqrt{\frac{2h}{g}}\)	通过已知高度反推时间	`duration`, `time`

重点考点提醒：很多初级教程会忽略单位统一。公式里的 \(g\) 单位是 \(m/s^2\)，\(h\) 是 \(m\)，\(t\) 是 \(s\)。但在前端 DOM 操作中，我们常用像素 px。这就带来了一个巨大的坑：1米等于多少像素？ 这个比例尺（Scale Factor）必须明确定义，否则你的苹果落地速度可能是每秒1个像素，看起来像慢动作电影。

环境准备：从零搭建模拟沙盒

既然是前端视角，我们的环境自然离不开浏览器和 JavaScript。不需要复杂的物理引擎库，原生 JS 加上 Canvas 或 DOM 操作足矣。

第一步：基础 HTML 结构

创建一个简单的 HTML 文件，包含一个画布容器。我们使用 <canvas> 而不是 DOM 元素，因为物理模拟涉及高频更新，Canvas 的性能远优于频繁修改 DOM 的 style.top。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Free Fall Simulation</title><style>body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; }canvas { border: 1px solid #333; background: white; }#controls { position: absolute; top: 20px; left: 20px; }</style>
</head>
<body><div id="controls"><button id="startBtn">开始下落</button><button id="resetBtn">重置</button></div><canvas id="simCanvas" width="400" height="600"></canvas><script src="main.js"></script>
</body>
</html>

第二步：引入依赖与配置

我们不需要引入第三方库，但需要明确我们的“物理常量”。在实际项目中，这些常量通常配置在 config.js 中，方便调整。

// config.js 片段
const PHYSICS = {GRAVITY: 9.8,          // 标准重力加速度 m/s^2SCALE: 50,             // 比例尺：1米 = 50像素INITIAL_HEIGHT: 10     // 初始下落高度：10米
};const CANVAS = {WIDTH: 400,HEIGHT: 600,OBJECT_RADIUS: 20      // 物体半径（像素）
};

这里有个高频考点：SCALE 的选择。如果你把 SCALE 设得太大，物体下落极快，帧与帧之间位移过大，可能出现“穿透”地面现象；如果设得太小，下落过程拖沓，用户感知不到加速感。一般建议根据画布高度和期望下落时长来反推 SCALE。

核心语法：JS 如何实现牛顿定律

很多人以为前端做物理模拟要调用复杂的微积分库，其实不然。核心逻辑就是欧拉积分法（Euler Integration）的简化版。

在离散时间步长 \(\Delta t\)（即两帧之间的时间间隔）内，我们可以近似认为加速度是恒定的。

核心逻辑推导：

时间更新：\(t_{new} = t_{old} + \Delta t\)
速度更新：\(v_{new} = v_{old} + g \cdot \Delta t\)
位置更新：\(y_{new} = y_{old} + v_{old} \cdot \Delta t\) （注意：这里用的是旧速度，是简化欧拉法；更精确的是半隐式欧拉，用新速度，见下文代码注释）

关键代码片段：

function updatePhysics(deltaTime) {// deltaTime 单位：秒 (s)// 1. 计算当前速度 (v = g * t)// 注意：这里直接累加更直观，避免浮点误差累积// v += g * dtcurrentVelocity += (PHYSICS.GRAVITY * deltaTime);// 2. 计算位移增量// 将物理单位(m)转换为像素(px)const displacementInPx = (currentVelocity * deltaTime) * PHYSICS.SCALE;// 3. 更新 Y 轴坐标// 注意：Canvas 的 Y 轴向下为正，所以是加法objectY += displacementInPx;// 4. 边界检测const groundY = CANVAS.HEIGHT - CANVAS.OBJECT_RADIUS;if (objectY >= groundY) {objectY = groundY; // 碰撞后停在地面isFalling = false; // 停止模拟}
}

避坑指南：

时间步长 \(\Delta t\)：不要假设每帧都是 16.6ms（60fps）。浏览器标签页切换、GC 垃圾回收都会导致帧率波动。必须使用 performance.now() 或 requestAnimationFrame 的时间戳来计算真实的 \(\Delta t\)。
单位一致性：这是自由落体运动公式在前端应用中最容易翻车的地方。\(g\) 是 \(m/s^2\)，算出来的位移是 \(m\)，必须乘以 SCALE 才能变成 px。忘记乘 SCALE 是新手 90% 的报错原因。

完整代码示例：可运行的模拟系统

下面是一个完整的、可运行的示例。它包含了时间戳计算、碰撞检测和可视化。你可以直接复制这段代码到 main.js 中运行。

const canvas = document.getElementById('simCanvas');
const ctx = canvas.getContext('2d');// 状态变量
let objectY = 50; // 初始 Y 坐标 (px)
let currentVelocity = 0; // 当前速度 (m/s)
let isFalling = false;
let lastTimestamp = 0;
let animationId = null;// 绑定按钮事件
document.getElementById('startBtn').addEventListener('click', () => {if (!isFalling) {isFalling = true;lastTimestamp = performance.now();animationId = requestAnimationFrame(loop);}
});document.getElementById('resetBtn').addEventListener('click', () => {cancelAnimationFrame(animationId);objectY = 50;currentVelocity = 0;isFalling = false;drawScene();
});// 主循环
function loop(timestamp) {// 计算真实的时间间隔 (秒)const deltaTime = (timestamp - lastTimestamp) / 1000;lastTimestamp = timestamp;// 防止切后台后 deltaTime 巨大导致物体瞬移if (deltaTime > 0.1) {return requestAnimationFrame(loop);}if (isFalling) {updatePhysics(deltaTime);}drawScene();if (isFalling) {animationId = requestAnimationFrame(loop);}
}// 物理更新逻辑
function updatePhysics(deltaTime) {// 加速度 a = g// 速度 v = v0 + a*t -> 增量 dv = a*dtcurrentVelocity += PHYSICS.GRAVITY * deltaTime;// 位移 s = v*t (近似)// 物理位移 (米) -> 像素位移const dy = (currentVelocity * deltaTime) * PHYSICS.SCALE;objectY += dy;// 碰撞检测const floorY = CANVAS.HEIGHT - CANVAS.OBJECT_RADIUS;if (objectY >= floorY) {objectY = floorY;isFalling = false;// 可选：添加碰撞音效或视觉反馈}
}// 绘制场景
function drawScene() {// 清空画布ctx.clearRect(0, 0, CANVAS.WIDTH, CANVAS.HEIGHT);// 画地面ctx.fillStyle = '#8B4513';ctx.fillRect(0, CANVAS.HEIGHT - 10, CANVAS.WIDTH, 10);// 画物体 (红色圆形)ctx.beginPath();ctx.arc(CANVAS.WIDTH / 2, objectY, CANVAS.OBJECT_RADIUS, 0, Math.PI * 2);ctx.fillStyle = 'red';ctx.fill();// 画轨迹线 (可选，增强视觉效果)ctx.beginPath();ctx.moveTo(CANVAS.WIDTH / 2, 50);ctx.lineTo(CANVAS.WIDTH / 2, objectY);ctx.strokeStyle = 'rgba(255, 0, 0, 0.3)';ctx.lineWidth = 2;ctx.stroke();
}// 初始绘制
drawScene();

代码解析要点：

performance.now()：这是获取高精度时间戳的标准方法，比 Date.now() 更适合游戏循环。
deltaTime > 0.1 判断：这是一个重要的防抖措施。如果你去接电话，浏览器暂停 JS，回来后 deltaTime 可能是几秒，直接算会导致物体瞬间掉到地底。限制最大步长可以保持视觉连贯性。
半隐式欧拉法：代码中先更新速度，再用新速度更新位置。这比先用旧速度更新位置（显式欧拉）更稳定，尤其在重力系统中，能减少能量漂移。

常见报错与调试技巧

在实际项目中，即便公式对了，也可能遇到各种诡异现象。以下是几个高频问题的排查思路，堪称速查手册里的实战篇。

1. 物体下落速度忽快忽慢

原因：requestAnimationFrame 的帧率不稳定，或者 deltaTime 计算错误。
解决：确保 lastTimestamp 在每次循环开始时更新，而不是在循环开始时固定为 0。检查是否有耗时操作（如复杂 DOM 操作）阻塞了主线程。

2. 物体穿过地面

原因：当速度极快时，单帧位移量超过了物体直径，直接跳过了碰撞检测的边界。
解决：
- 方案 A（简单）：限制最大 deltaTime，或者限制最大速度。
- 方案 B（专业）：使用连续碰撞检测（CCD）。在计算位移前，先判断本帧是否会发生碰撞，如果会，计算碰撞发生的具体时间，将物体移动到碰撞点，剩余时间以 0 速度处理。
- 前端简易版：如果 objectY + dy > floorY，则 objectY = floorY，并强制 currentVelocity = 0。这通常足够应付大多数 UI 动画。

3. 单位换算混乱

现象：物体下落极慢或极快。
排查：检查 PHYSICS.SCALE 的值。你可以打印 objectY 的变化率，看看是否符合 \(v = gt\) 的预期。例如，下落 1 秒后，速度应为 \(9.8 \, m/s\)，位移约为 \(4.9 \, m\)。如果 SCALE=50，则 Y 轴应增加 \(245 \, px\)。

4. 跨浏览器兼容性

虽然 requestAnimationFrame 现在已标准化，但在某些老旧 WebView 中可能表现不佳。务必提供 setTimeout 或 setInterval 的降级方案（虽然不推荐，因为时间精度差）。

关于权威性的补充 在涉及网络传输或数据同步的物理模拟（如多人在线游戏）中，物理状态的同步需要严格遵循时间戳规范。虽然前端模拟多为单机，但理解 RFC 标准 中关于时间同步（如 NTP 协议的时间戳格式）有助于你在处理服务端权威物理引擎时，正确解析服务器下发的物理状态包。例如，RFC 792 定义了 ICMP，而更高级的同步协议往往依赖于类似的时间戳精度要求。在前端，我们虽不直接处理网络包，但 performance.now() 的高精度正是为了满足这种对时间敏感的计算需求。