Forge 动效设计

动效设计的常见问题

工程师在实现界面动效时，常陷入两种误区：要么是追求视觉炫酷的「装饰性动画」，既增加性能负担又干扰用户认知；要么是忽略交互反馈的「功能性缺失」，导致操作与结果脱节。此外，复杂的动效编排还常伴随性能问题（如频繁触发布局重绘）、可访问性缺失（未适配 prefers-reduced-motion）及跨技术栈混用冲突（如 GSAP 与 Framer Motion 在同一组件混用）。这些问题不仅降低用户体验，更可能导致业务逻辑混乱与开发维护成本激增。

技能的核心能力与工作逻辑

1. 动效哲学：意义优先的决策框架

技能以「动效是沟通而非装饰」为核心理念，要求每个动画前必须回答三个问题：

• 传递何种状态变化（如加载完成、验证失败）
• 移除动画是否损害理解（若答案为否则删除）
• 是否适配 prefers-reduced-motion（必须尊重系统偏好）

通过四层动效层级划分明确优先级：功能性动效（加载、过渡）始终存在，反馈性动效（按钮按压、拖拽确认）实时响应，上下文动效（列表交错、共享元素）需编排等级≥4时启用，环境动效（粒子、网格）需编排等级≥7时启用。

2. 物理驱动的动效实现规范

• 弹簧物理优先：交互元素仅使用弹簧动画（如 Framer Motion 的 useReducedMotion 检测替代瞬时透明度变化），非交互环境元素允许使用 cubic-bezier(0.16, 1, 0.3, 1) 缓动函数。
• 技术栈分层实践：

- Framer Motion：提供页面过渡、列表交错揭示、磁性按钮、共享元素过渡等交互模式
- GSAP：专用于滚动叙事、全页序列及 Canvas 背景，需在编排等级≥9时启用，且严禁与 Framer Motion 混用
- Three.js：仅限英雄区 Canvas 背景、3D 产品展示、数据地球可视化，需遵循顶点数≤300k（移动端）、使用 BufferGeometry、合并静态几何体等性能规则

3. 性能与可维护性保障

技能内置严格的性能检查清单，包括：

• 仅动画化 transform 和 opacity
• 动画结束后移除 will-change: transform
• 所有 GSAP 实例在 useEffect 清理时销毁
• Three.js 渲染器在清理时释放
• 持续动画封装为独立的 React.memo 组件
• 同时通过 CSS 媒体查询和 Framer Motion 的 useReducedMotion() 适配减少动效偏好

适用边界与注意事项

• 技术栈隔离原则：GSAP 与 Framer Motion 严禁在同一组件混用，Three.js 仅用于高视觉冲击力场景
• 移动端适配限制：Three.js 场景需遵守顶点数限制，GPU 性能低于阈值时降级为静态图像
• 编排等级对应：不同复杂度的动效需对应不同的编排等级（上下文动效≥4，环境动效≥7，GSAP≥9，Three.js=10）
• 可访问性强制要求：所有动画必须同时通过 CSS 媒体查询和 JS 钩子适配 prefers-reduced-motion

该技能更适合需要精细化交互反馈、复杂动效编排或数据可视化场景的产品，而非简单界面的装饰性动画。通过哲学指导、物理驱动的实现规范与严格的性能约束，帮助工程师构建既具表现力又符合工程标准的动效系统。