🪐 星球轨道动画原理

模拟太阳系行星公转效果。

运动方程

行星位置由以下公式计算:

1
2
const px = cx + Math.cos(p.angle) * p.orbitR;
const py = cy + Math.sin(p.angle) * p.orbitR * 0.5;

椭圆轨道

使用 Math.PI * 2 控制角度,实现周期性运动。

鼠标交互

行星会响应鼠标位置产生轻微偏移:

1
2
3
4
if (dist < 120) {
p.x = px + dx * 0.12;
p.y = py + dy * 0.12;
}

光晕效果

使用径向渐变 createRadialGradient 实现行星发光效果。