v2：当 GSAP 不再是问题时
发布: (2026年1月15日 GMT+8 17:25)
3 min read
原文: Dev.to
Source: Dev.to
v1: 与 GSAP 对抗
- 动画是普通、简单且固定的（滚动驱动）。
- GSAP 看起来像是我在“对抗”而不是“合作”的对象。
v2: 不同的思维方式
从“添加动画”到“为系统动画”
我没有把 GSAP 强行塞进主应用，而是创建了一个名为 orb‑lab 的独立路由，在那里可以无压力地进行实验。过程有时会让人沮丧——有些提交信息甚至暗示我曾考虑放弃这个想法——但我坚持了下来。
关键的架构转变
| 责任 | 工具 |
|---|---|
| 全局运动 | GSAP |
| 基于几何的逻辑 | 原生 JavaScript 与 CSS |
| UI 框架状态 | React（不参与动画状态） |
- orb 的旅程不再是一个巨大的单一时间轴。它从 hero 区段移动到 projects，每个段落各自负责自己的职责。
技术亮点
曲线 SVG 示例
- 最初的尝试 – GSAP 干扰了全局动画状态。
- 解决方案 – 使用原生 JavaScript 与 CSS 重写动画：
- 将滚动位置映射为进度。
- 随时间平滑该数值。
- 将 SVG 路径点转换为视口坐标。
- 手动移动跟随者。
对底层数学的理解让修复变得显而易见。
GSAP 教会我的超越动画的东西
- 动画是用户体验，而非装饰。
- 克制胜于复杂；知道何时停下来是一项关键技能。
致谢
特别感谢 @webdeveloperhyper 的文章和关于 GSAP、R3F 以及动画基础的有益评论。他的指导促使我放慢脚步，真正理解工具，而不是在混乱之上堆砌复杂性。
结论
- v1 暴露了我所缺乏的知识。
- v2 证明了理解来源于克制，而不是不断添加新功能。
这过程很有趣，我已经期待下一次迭代了。
View Repository (link omitted)。