双元素旋转转速异常求助：子元素转速不稳定如何修复

红色元素（moon）是蓝色元素（earth）的子元素，蓝色元素旋转时红色元素会随之转动，同时红色元素自身具备独立旋转速度。当前红色元素转速不稳定，根源是两个独立的setInterval定时器执行时机无法完全同步，导致红色元素的实际旋转角度出现波动——比如父元素（earth）的移动和自身（moon）的移动偶尔叠加，造成转速忽快忽慢。

核心是用单个动画循环统一控制所有元素状态更新，避免多定时器的执行偏差。推荐使用requestAnimationFrame，它会在浏览器每一帧渲染前触发回调，保证所有元素的状态更新在同一时间点完成，同时还能自动适配浏览器刷新频率，让动画更流畅。

如果要进一步保证转速恒定，可以基于时间差计算角度增量，避免帧率波动影响转速。

JavaScript #

const r_moon = 100; // 月球轨道半径
const r_earth = 200; // 地球轨道半径
let a = 0; // 月球自转角
let b = 0; // 地球公转角
let lastTime = 0;

// 根据时间差计算角度增量，保证转速不受帧率影响
function getAngleDelta(timeElapsed) {
  // 可调整数值改变转速，单位：弧度/秒
  const earthRotateSpeed = Math.PI; // 地球每秒转半圈
  const moonRotateSpeed = Math.PI * 2; // 月球每秒转一圈
  return {
    earth: (earthRotateSpeed * timeElapsed) / 1000,
    moon: (moonRotateSpeed * timeElapsed) / 1000
  };
}

function updateAnimation() {
  const currentTime = Date.now();
  const timeElapsed = currentTime - lastTime;
  lastTime = currentTime;

  const delta = getAngleDelta(timeElapsed);
  
  // 更新地球位置
  b = (b + delta.earth) % (Math.PI * 2);
  const earthX = r_earth * Math.cos(b);
  const earthY = r_earth * Math.sin(b);
  document.querySelector('#earth').style.left = `${earthX}px`;
  document.querySelector('#earth').style.top = `${earthY}px`;

  // 更新月球位置
  a = (a + delta.moon) % (Math.PI * 2);
  const moonX = r_moon * Math.cos(a);
  const moonY = r_moon * Math.sin(a);
  document.querySelector('#moon').style.left = `${moonX}px`;
  document.querySelector('#moon').style.top = `${moonY}px`;

  // 循环触发下一帧动画
  requestAnimationFrame(updateAnimation);
}

// 启动动画
requestAnimationFrame(updateAnimation);

CSS #

html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
}

.box {
  margin: auto;
  margin-top: 200px;
  height: 400px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#earth {
  position: relative;
  height: 30px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
}

#moon {
  position: relative;
  height: 20px;
  aspect-ratio: 1 / 1;
  background-color: red;
}

HTML #

<div class="box">
  <div id="earth">
    <div id="moon"></div>
  </div>
</div>

如果不需要适配帧率波动，也可以直接在单循环里固定角度增量，效果同样稳定：

const r_moon = 100;
const r_earth = 200;
let a = 0;
let b = 0;

function updateAnimation() {
  // 更新地球角度
  b = (b + Math.PI / 360) % (Math.PI * 2);
  const earthX = r_earth * Math.cos(b);
  const earthY = r_earth * Math.sin(b);
  document.querySelector('#earth').style.left = `${earthX}px`;
  document.querySelector('#earth').style.top = `${earthY}px`;

  // 更新月球角度
  a = (a + Math.PI / 180) % (Math.PI * 2);
  const moonX = r_moon * Math.cos(a);
  const moonY = r_moon * Math.sin(a);
  document.querySelector('#moon').style.left = `${moonX}px`;
  document.querySelector('#moon').style.top = `${moonY}px`;

  requestAnimationFrame(updateAnimation);
}

requestAnimationFrame(updateAnimation);

内容的提问来源于stack exchange，提问作者Dumb