Bexa 电影级动效与物理引擎

动效设计要解决什么问题

很多前端项目的动画是"装饰性"的：按钮按下没有反馈、列表项一次性弹出缺少节奏感、页面切换生硬。另一个常见问题是性能失控——在滚动容器上做动画、忘记清理 GSAP 实例、在同一组件里混用 GSAP 和 Framer Motion。

核心思路：意义先于动作

Forge Motion 的第一原则是：任何动画都要先回答三个问题——它传达了什么状态变化？去掉它是否损害理解？是否尊重 prefers-reduced-motion？后两项答案都是"否"时，直接删掉这个动画。

动画按重要性分为四层：

• 功能性：加载状态、页面切换、校验反馈，始终保留
• 反馈性：按钮按压、悬停响应、拖拽确认
• 语境性：列表错开出现、滚动揭示、共享元素过渡
• 环境性：背景网格、浮动粒子、光标轨迹，仅当编排复杂度达到 7 以上时使用

物理与工程实践

弹簧物理是核心语言：交互元素只用 spring，禁用 ease、ease-in-out 或 linear；非交互的环境元素可使用 cubic-bezier(0.16, 1, 0.3, 1)。

性能检查清单包括：只动画化 transform 和 opacity、动画结束后移除 will-change、噪点效果放在 fixed 伪元素而非滚动容器上、在 useEffect cleanup 中销毁 GSAP 实例与 Three.js renderer、持续动画隔离到独立的 React.memo 组件中。

适用边界

• GSAP 仅用于编排复杂度 ≥ 9 的场景（scrolltelling、整页序列、canvas 背景），且严禁与 Framer Motion 出现在同一组件树
• Three.js 仅限 hero 背景、3D 产品展示、数据球可视化，移动端单场景顶点数不超过 30 万
• GPU 等级低于 1 时，用静态图片替代 WebGL canvas