Composer不支持自动物理联动,滚珠公转需容器rotate+各球translate径向偏移,自转需按节圆与滚珠直径比计算负向角速度,且须统一时间源t、锁定帧率以保同步。

Composer 本身不支持物理模拟或零件级旋转动画,所谓“轴承滚珠同步转动”必须靠手动关键帧+数学计算实现,没有自动联动机制。
为什么 rotate 属性不能直接驱动滚珠绕轴公转+自转
Composer 的 rotate 是对图层整体做欧拉角变换,它不区分“绕世界轴转动”和“绕自身轴转动”。轴承中滚珠既要沿环形轨道公转(绕轴承中心),又要因接触摩擦产生自转(绕自身中心),二者角速度不同、轴向不同——单个 rotate 值无法同时表达这两个自由度。
常见错误现象:rotateZ 统一设为 t * 30 后,所有滚珠看起来像被钉在同一个转盘上,既不滚动也不啮合,失去机械真实感。
- 公转角度 =
t * speed(比如每秒 1 圈 →t * 360) - 自转角度 =
-t * speed * (pitch_diameter / ball_diameter)(负号表示反向,比例由节圆直径与滚珠直径决定) - 每个滚珠的初始偏移角需按等分分布:
i * 360 / ball_count
用 transformOrigin + translate 模拟公转轨道
要让滚珠绕轴承中心画圆,不能只靠 rotate,得先用 translate 把它“搬”到轨道半径位置,再用 transformOrigin 锚定到中心点,最后对父容器做旋转——但 Composer 不允许动态改 transformOrigin,所以实际做法是:把所有滚珠放在一个空容器图层下,对该容器设 rotate,同时每个滚珠用 translate 预设径向偏移。
示例(3 个滚珠,节圆半径 80px):
container.rotateZ = t * 360; ball_0.translateX = 80; // 初始在右侧 ball_1.translateX = -40; ball_1.translateY = 69.28; // cos120, sin120 ball_2.translateX = -40; ball_2.translateY = -69.28;
注意:translate 值是静态的,动的是容器;滚珠自身的 rotateZ 再叠加自转角度。
同步问题本质是时间采样精度与帧率匹配
多个滚珠看似“同步”,其实是它们都读同一个时间变量 t。一旦项目帧率不稳(如导出时掉帧、预览卡顿),t 的增量就非线性,公转/自转比例关系会被破坏,出现滚珠打滑或倒转的错觉。
- 导出前务必在
Render Settings中锁定帧率为 30 或 60,禁用“自适应帧率” - 避免在表达式里用
time直接乘大系数,改用linear(t, 0, 1, 0, 360)等缓动函数控制节奏 - 滚珠数量多于 8 个时,建议把轨道计算抽成函数,否则表达式易读性断崖下降
真正难的不是算角度,而是让每个滚珠的 translate 和 rotate 在同一帧内完成更新——Composer 表达式引擎不保证多属性求值顺序,所以公转位移和自转角度必须基于同一个 t 值计算,不能拆成两个独立表达式依赖不同时间源。











