作为程序员，我们总想用代码掌控一切。但当你试图用Math.sin()去模拟人类的步伐时，现实往往会给你一记响亮的耳光——或者一个“顺拐”的机器人。
今天，我们来聊聊在 Remotion（React 视频生成库）中从零构建一个“拿可乐”交互动画的踩坑之旅。这不仅仅是关于代码，更是关于如何用数学理解生物力学。
1. 物理绑定的痛：断头与漂浮
最初，我天真地以为把头和身体分开写，通过调整top/left就能让它们看起来像是一个整体。结果？只要身体一转身，头就留在了原地，仿佛在演恐怖片。
解决方案：重构组件树
要在 React 中实现“物理绑定”，最直接的方法就是组件嵌套。把 Head 变成 Troso 的子组件，这样父级的 rotate 就会自动传递给子级。
代码层面的改动虽然简单，但逻辑至关重要：
2. 走路的艺术：告别“顺拐”
最让我崩溃的瞬间，是看到我的小人自信满满地走向冰箱，但左手和左脚同时前伸。这种“顺拐”现象在代码里其实是一个非常经典的相位问题。
我们通常用 Math.sin(t) 来控制周期性运动。如果手和脚使用完全相同的正弦波，它们就会同步运动——也就是顺拐。
修复方案：引入相位差
要实现自然的走路姿态，手臂的摆动必须与腿部反相。在数学上，这意味着我们需要给手臂的正弦波加上一个 $\pi$（180度）的偏移量。
3. 最终效果验证
经过无数次的微调（以及无数次看着小人把可乐插进鼻孔里），我们终于得到了一个动作流畅、逻辑自洽的交互动画。
总结
用代码做动画，本质上是在用数学函数重构现实世界的物理规律。
- •层级关系 (Hierarchy) 解决了“整体性”问题。
- •正弦波 (Sine Waves) 解决了“周期性”问题。
- •相位差 (Phase Shift) 解决了“协调性”问题。
下次当你看到有人走路顺拐时，不妨想一想：也许是上帝在他的
armWalkSwing 函数里忘加那个 Math.PI 了？
