Bexa 动效工坊

它解决什么问题

前端动画常常沦为视觉噪音。有些动效既不解释状态变化，又拖慢响应，还会被用户系统里的 prefers-reduced-motion 直接忽略。更糟的是，一个组件里混用 GSAP 和 Framer Motion，或者在滚动容器上做噪点，会让页面在中低端设备上掉帧。FORGE MOTION 的思路是：动效不是装饰，而是沟通。每次动之前先回答——这个动作对用户意味着什么？

核心能力与工作流程

这套技能按四个层级组织动效，每层都有明确的出现条件：

• Functional：加载态、页面切换、校验反馈。这类动效应当常驻，因为它们直接承担信息传递。
• Feedback：按钮按压、悬停响应、拖拽确认。它们解释用户的直接操作结果。
• Contextual：列表错峰、滚动揭示、共享元素过渡。当编排复杂度 CHOREOGRAPHY ≥ 4 时才启用。
• Ambient：背景网格、浮动粒子、光标轨迹。只有复杂度达到 7 以上才加入。

在具体实现上，技能提供了几类预设模式。Framer Motion 覆盖页面切换、列表错峰、磁吸按钮、共享元素和滚动揭示。GSAP 只用于高编排场景，比如横向滚动章节或全页序列，并且有一条硬规则：同一组件里绝不能把 GSAP 和 Framer Motion 混在一起。Three.js 只服务于 hero canvas、3D 产品展示和数据地球这三类场景，移动端限制在 30 万顶点以内，必须用 BufferGeometry，静态几何体要合并，GPU 等级低于 1 时退化为静态图。

弹簧物理是交互动效的通用语言。技能明确禁止在交互元素上使用 ease、ease-in-out 或 linear，非交互的环境元素才允许用一条特定的 cubic-bezier(0.16, 1, 0.3, 1)。性能清单要求只对 transform 和 opacity 做动画，动画结束后移除 will-change，把永久循环动画隔离在 React.memo 组件中，并在 useEffect 清理阶段销毁所有 GSAP 实例和 Three.js 渲染器。

适用边界与注意点

这套技能不负责帮你决定产品该不该有动画，它提供的是工程判断框架。如果你的产品本身几乎没有动效需求，引入它会显得重。如果你的团队已经在用其他动画方案，需要评估切换成本。另外，CHOREOGRAPHY 数值是技能内部的编排难度指标，不是通用标准，实际使用时需要结合业务场景重新映射。

prefers-reduced-motion 不是可选项。技能要求所有动效都检查系统偏好，在 Framer Motion 里通过 useReducedMotion() 做替代，同时用 CSS 媒体查询兜底。忽略这一点，等于让一部分用户直接面对一个没有反馈的界面。