三端动效协作实战：用 Motion Spec 打通设计到代码

设计师提出高级动效后，团队常见的冲突不是“谁对谁错”，而是信息载体不一致。

设计在表达视觉结果，开发在评估实现路径，测试在关注可验证标准。三端技术栈又完全不同，靠一个 Lottie 或一段参考视频无法消除分歧。

真正需要统一的是动效语言，而不是某个工具。

先纠正目标：还原的是动效意图，不是逐帧画面

三端协作如果把目标定义为“逐帧还原 AE 效果”，几乎一定失败。更可执行的目标是“还原动效意图”。

一次可交付的动效，至少要包含 4 层信息：

1. 触发条件：什么时候发生。
2. 语义意图：为什么要动。
3. 时间与节奏：持续多久，按什么曲线变化。
4. 表现手段：位移、缩放、遮罩、模糊、粒子或 3D。

多数沟通失败来自只交付了第 4 层。

为什么“只看 Lottie 或视频”会卡住

Lottie 对简单图层动画很有效，但它无法覆盖所有高级表现，例如复杂遮罩、3D、平台特定渲染特性。

如果团队把交付定义为：

• 一个 AE 文件
• 一个导出失败或超重的 Lottie
• 一段“你们照着做”的视频

开发端会陷入猜测，评审时只能争论“像不像”，而不是“是否满足产品意图”。

建立动效分级：先决定承载方式，再讨论实现细节

把所有动效先分级，可以显著降低跨端扯皮。一个实用分层如下。

Level 1：UI 反馈级（跨端强一致）

特征：点击反馈、切换、轻量位移与透明度变化，时长通常小于 300 ms。

建议：直接使用原生动画能力，不要上 Lottie。

• Android：Compose Animation / Motion
• iOS：SwiftUI / UIViewPropertyAnimator
• Web：CSS Animation / Web Animations API

Level 2：结构过渡级（优先一致）

特征：列表到详情、页面过渡、Hero 动画。

关键不是特效，而是元素映射关系。设计要交付元素 ID 与映射规则，开发按平台机制实现。

Level 3：表现增强级（允许差异）

特征：装饰性背景、光影、氛围动效，不影响核心路径。

可使用 Lottie、Canvas/Skia、Shader 等，允许三端“感觉一致”而非“像素一致”。

Level 4：品牌沉浸级（场景化强表达）

特征：开屏、活动页、品牌叙事。

优先视频/WebP/HEVC alpha 等承载。这里应接受工程复用度下降，换取品牌表达。

用 Motion Spec 作为中间语言

动效协作的关键不是“再开一次会”，而是落地一个统一格式。Motion Spec 的作用是把视觉语言转换为工程语言。

建议最少包含 6 个模块：

1. 触发条件：onAppear / onClick / onScroll / onLoadComplete。
2. 参与元素：可唯一定位的元素 ID。
3. 变化维度：opacity、scale、translateX/Y、blur、color。
4. 时间轴：总时长、分阶段、是否可打断。
5. 节奏函数：easeOut、spring 或 cubic-bezier。
6. 可降级策略：低端机、首屏性能、弱网场景下如何退化。

一个结构化片段示例：

{
  "trigger": "onAppear",
  "duration": 600,
  "elements": [
    {
      "id": "product_image",
      "from": { "scale": 0.92, "opacity": 0 },
      "to": { "scale": 1.0, "opacity": 1.0 },
      "easing": "easeOut"
    }
  ]
}

这个格式的价值在于：

• 设计师可填写，不依赖具体平台。
• 开发可映射到原生动画 API。
• AI 可据此生成 Android/iOS/Web 初版代码。

让 AI 生成代码可用的两个前提

很多团队尝试“AI 直接写动效”，效果不稳定。问题通常不在模型，而在输入。

要稳定生成，至少满足两点：

1. 描述必须结构化，不能只写“像丝绸一样顺滑”。
2. 参数要有白名单，明确哪些值必须跨端一致。

推荐固定跨端核心参数：duration、delay、easing、transform。复杂粒子、噪声类参数默认不强求一致。

一套务实的三端落地比例

在业务项目里，追求“全部高级动效跨端完全一致”成本过高。更务实的配比如下：

• 70% 原生动画（可维护、可测试、可被 AI 辅助生成）
• 20% Lottie（轻量装饰，不放核心交互）
• 10% 视频/WebP（品牌或高复杂场景兜底）

这个组合能兼顾性能、还原度和迭代效率。

评审机制：从“像不像”转为“是否满足意图”

评审时可以固定 5 条验收标准：

1. 触发时机一致。
2. 总时长误差在可接受范围。
3. 核心变化维度一致。
4. 关键意图被保留。
5. 降级方案可验证。

这样讨论会从主观审美转向可验证标准，跨角色协作成本会明显下降。

结语

三端动效协作的核心不是选择某一个动效工具，而是建立“设计、工程、AI 共用的中间语言”。

当团队用 Motion Spec 明确触发、语义、时间轴和降级策略后，复杂动效就不再是“还原战”，而是可规划、可实现、可验收的工程系统。