匀速圆周运动交互课件

本次要实现的内容是沪科版必修二第五章 第三节 圆周运动中的图 5–25、图 5–26、图 5–28。

还有第五章 第四节 向心力 向心加速度中的图 5–37。

做出的成品如下所示：

代码解读

本课件第一次出现动画的代码，核心代码如下：

// 更新物理状态
function updatePhysics(deltaTime) {
  state.angle += state.angularVelocity * deltaTime;
    if (state.angle > 2 * Math.PI) {
    state.angle -= 2 * Math.PI;
  }
  state.time += deltaTime;

  // 更新显示值，确保时间滑动条联动
  updateDisplayValues();
}

// 动画循环
function animate(timestamp) {
  const deltaTime = lastTime ? (timestamp - lastTime) / 1000 : 0;
  lastTime = timestamp;

  if (state.isAnimating) {
    updatePhysics(deltaTime);
  }
  updateVisualization();
  requestAnimationFrame(animate);
}

可见，使用的是物理公式 Δφ = ωΔt 计算小球当前转过的角度，然后在 calculateBallPosition 方法中更新小球在屏幕上的位置。

// 计算小球位置
function calculateBallPosition(angle) {
  const x = constants.centerX + state.radius * constants.scale * Math.cos(angle);
  const y = constants.centerY + state.radius * constants.scale * Math.sin(angle);

  return { x, y };
}

requestAnimationFrame 是浏览器专门为动画设计的 API，它能智能地在下一次屏幕刷新时调用你的函数，实现最流畅的动画效果。目前主流屏幕的刷新率为 60 Hz，则每秒调用 60 次绘制函数。详细解释可见 Window：requestAnimationFrame() 方法。

运动轨迹的圆弧绘制代码在方法 drawArcLength 中：

// 绘制弧长
function drawArcLength() {
  const startAngle = state.arcStartTimeAngle;
  let endAngle = state.angle;

  // 计算累计角度差（用于计算弧长）
  let cumulativeAngleDiff = endAngle - startAngle;
  if (cumulativeAngleDiff < 0) {
    cumulativeAngleDiff += 2 * Math.PI;
  }

  // 计算顺时针方向的角度差（用于确定大圆弧标志）
  let clockwiseDiff = (endAngle - startAngle + 2 * Math.PI) % (2 * Math.PI);

  // 设置大圆弧标志：当顺时针角度差大于π时使用大圆弧
  const largeArcFlag = clockwiseDiff > Math.PI ? 1 : 0;
  const radius = state.radius * constants.scale;
  const startX = constants.centerX + radius * Math.cos(startAngle);
  const startY = constants.centerY + radius * Math.sin(startAngle);
  const endX = constants.centerX + radius * Math.cos(state.angle);
  const endY = constants.centerY + radius * Math.sin(state.angle);

  const pathData = `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
  elements.arcLength.setAttribute('d', pathData);

  ……
}

“大圆弧标志”的意思可参见 SVG 之椭圆弧。

小问题：当小球转过超过一圈后重新从起点开始绘制圆弧，可能会给学生带来误解。但不这样做轨迹线会重复为一个整圆看不出效果。

完整代码

code

发布时间：2026/1/25 下午4:30:45  阅读次数：77