365 lines
5.6 KiB
Markdown
365 lines
5.6 KiB
Markdown
# 动画接入工作流
|
||
|
||
## 1. 目的
|
||
|
||
这份文档用于说明：
|
||
|
||
- 设计公司提供的动画稿，应该如何转成程序可执行的内容
|
||
- 我方应该如何组织这类工作
|
||
- 动画接入前、中、后的协作方式
|
||
|
||
一句话：
|
||
|
||
**不要把动画稿直接塞进程序，要先把它转成“工程规格”。**
|
||
|
||
---
|
||
|
||
## 2. 核心原则
|
||
|
||
### 2.1 交付的是规格，不只是效果
|
||
|
||
设计公司不能只给：
|
||
|
||
- 视频
|
||
- GIF
|
||
- 一张效果图
|
||
|
||
至少还需要给：
|
||
|
||
- 动画名称
|
||
- 触发时机
|
||
- 作用对象
|
||
- 起始状态
|
||
- 结束状态
|
||
- 时长
|
||
- 延迟
|
||
- 缓动
|
||
- 是否循环
|
||
- 是否可中断
|
||
- 资源形式
|
||
- 降级方案
|
||
|
||
### 2.2 先分类，再决定技术实现
|
||
|
||
不是所有动画都适合用同一种实现方式。
|
||
|
||
必须先判断它属于：
|
||
|
||
- 地图空间动画
|
||
- HUD 动画
|
||
- UI / Feedback 动画
|
||
- 过场 / Cutscene 动画
|
||
|
||
### 2.3 先看信息价值，再看视觉效果
|
||
|
||
优先实现：
|
||
|
||
- 帮助用户理解状态的动画
|
||
- 引导视线的动画
|
||
- 强化反馈的动画
|
||
|
||
延后实现：
|
||
|
||
- 纯装饰性动画
|
||
- 对玩法理解没有帮助的长演出
|
||
|
||
### 2.4 低端机优先
|
||
|
||
任何动画都要先问：
|
||
|
||
- `lite` 模式下怎么降级？
|
||
- 不做时是否影响信息表达？
|
||
|
||
---
|
||
|
||
## 3. 推荐流程
|
||
|
||
建议每个动画都按下面这条流程走：
|
||
|
||
### 第一步：设计交付
|
||
|
||
设计提供：
|
||
|
||
- 动画视觉稿
|
||
- 动画规格参数
|
||
- 资源文件
|
||
- 适配说明
|
||
|
||
### 第二步：整理进动画字典
|
||
|
||
先把动画纳入事件字典，而不是直接实现。
|
||
|
||
例如：
|
||
|
||
- 什么事件触发它
|
||
- 作用在哪一层
|
||
- `standard / lite` 如何处理
|
||
|
||
### 第三步：技术归类
|
||
|
||
判断该动画由哪一层承接：
|
||
|
||
- `MapPresentation / Renderer`
|
||
- 页面 `WXML / WXSS`
|
||
- `UiEffectDirector`
|
||
- 单独的 `Cutscene` 层
|
||
|
||
### 第四步：选择实现方式
|
||
|
||
例如：
|
||
|
||
- 纯程序动画
|
||
- 序列帧 / sprite
|
||
- Lottie
|
||
- 视频
|
||
|
||
### 第五步：做性能分级
|
||
|
||
明确：
|
||
|
||
- `standard` 怎么做
|
||
- `lite` 怎么做
|
||
- 是否允许完全关闭
|
||
|
||
### 第六步：联调与验收
|
||
|
||
至少验证：
|
||
|
||
- 触发正确
|
||
- 状态切换正确
|
||
- 多次连续触发是否正常
|
||
- 可中断行为是否正确
|
||
- 低端机是否流畅
|
||
|
||
---
|
||
|
||
## 4. 动画实现方式建议
|
||
|
||
### 4.1 纯程序动画
|
||
|
||
适合：
|
||
|
||
- 地图 pulse
|
||
- 数字过渡
|
||
- HUD 状态变化
|
||
- 按钮反馈
|
||
|
||
优点：
|
||
|
||
- 最轻
|
||
- 最稳定
|
||
- 最适合小程序
|
||
|
||
### 4.2 Lottie / 骨骼类动画
|
||
|
||
适合：
|
||
|
||
- 局部高质量 UI 动效
|
||
- 成功反馈
|
||
- 勋章 / 特殊提示
|
||
|
||
风险：
|
||
|
||
- 小程序里复杂 Lottie 可能卡
|
||
|
||
### 4.3 序列帧 / Sprite
|
||
|
||
适合：
|
||
|
||
- 爆点
|
||
- 金币收集
|
||
- 局部地图特效
|
||
|
||
风险：
|
||
|
||
- 占内存
|
||
- 占包体
|
||
|
||
### 4.4 视频 / 过场动画
|
||
|
||
适合：
|
||
|
||
- 章节开场
|
||
- 比赛结果页
|
||
- 特殊演出
|
||
|
||
不适合：
|
||
|
||
- 地图过程中的高频反馈
|
||
|
||
---
|
||
|
||
## 5. 当前项目里的推荐落点
|
||
|
||
### 地图空间动画
|
||
|
||
放在：
|
||
|
||
- `MapPresentation`
|
||
- `MapScene`
|
||
- `WebGL Renderer`
|
||
|
||
### HUD 动画
|
||
|
||
放在：
|
||
|
||
- 页面层 `WXML / WXSS`
|
||
|
||
### Feedback 动画
|
||
|
||
放在：
|
||
|
||
- `feedbackConfig`
|
||
- `UiEffectDirector`
|
||
- `FeedbackDirector`
|
||
|
||
### 过场动画
|
||
|
||
建议未来独立一层：
|
||
|
||
- `Transition`
|
||
- `Cutscene`
|
||
|
||
---
|
||
|
||
## 6. 当前建议的协作方式
|
||
|
||
以后和设计公司协作时，建议这样分工：
|
||
|
||
### 设计公司负责
|
||
|
||
- 视觉稿
|
||
- 动画节奏
|
||
- 参数规格
|
||
- 资源文件
|
||
- 降级建议
|
||
|
||
### 我方负责
|
||
|
||
- 事件归类
|
||
- 技术选型
|
||
- 动画字典维护
|
||
- 分层接入
|
||
- 性能分级
|
||
|
||
---
|
||
|
||
## 7. 推荐的工作顺序
|
||
|
||
建议以后优先接这类动画：
|
||
|
||
1. 打点成功
|
||
2. 目标切换
|
||
3. 跳点
|
||
4. 高压 / 危险反馈
|
||
5. 章节开场 / 过场动画
|
||
|
||
---
|
||
|
||
## 8. 结论
|
||
|
||
动画接入的正确方式不是：
|
||
|
||
**拿到设计稿 -> 直接写代码**
|
||
|
||
而是：
|
||
|
||
**拿到设计稿 -> 转成动画规格 -> 纳入动画字典 -> 选技术实现 -> 做性能分级 -> 再接程序**
|
||
|
||
---
|
||
|
||
## 9. 规格模板
|
||
|
||
后续和设计公司、外包或内部设计协作时，建议每个动画至少补齐下面这些字段：
|
||
|
||
- 动画 ID
|
||
- 动画名称
|
||
- 所属页面/模块
|
||
- 所属层级：地图空间 / HUD / UI反馈 / 过场
|
||
- 触发事件
|
||
- 触发条件
|
||
- 是否高频
|
||
- 作用对象
|
||
- 起始状态 / 结束状态
|
||
- 动画形式：程序动画 / Lottie / 序列帧 / 视频
|
||
- 资源文件
|
||
- 时长 / 延迟 / 缓动
|
||
- 是否循环
|
||
- 是否可中断
|
||
- 重复触发策略：覆盖 / 忽略 / 重启 / 排队
|
||
- `standard` 表现
|
||
- `lite` 表现
|
||
- 是否允许关闭
|
||
- 验收标准
|
||
|
||
推荐最小记录格式：
|
||
|
||
```md
|
||
动画 ID：
|
||
动画名称：
|
||
所属页面/模块：
|
||
所属层级：
|
||
触发事件：
|
||
触发条件：
|
||
动画形式：
|
||
时长：
|
||
缓动：
|
||
是否循环：
|
||
是否可中断：
|
||
重复触发策略：
|
||
standard 表现：
|
||
lite 表现：
|
||
验收标准：
|
||
```
|
||
|
||
---
|
||
|
||
## 10. 接入评审清单
|
||
|
||
在接设计稿或准备开发前，至少先过一遍这份清单：
|
||
|
||
### 设计侧
|
||
|
||
- 动画目标是否明确
|
||
- 触发条件是否明确
|
||
- 是否有完整规格和资源
|
||
- 是否提供 `lite` 降级方案
|
||
|
||
### 技术侧
|
||
|
||
- 动画属于哪一层
|
||
- 最合适的实现方式是什么
|
||
- 是否真的需要资源文件，还是纯程序动画就够
|
||
|
||
### 性能侧
|
||
|
||
- 是否高频触发
|
||
- `lite` 下是保留、简化还是关闭
|
||
- 是否会带来高频 `setData`、持续循环动画或额外桥接成本
|
||
|
||
### 交互侧
|
||
|
||
- 是否可中断
|
||
- 多次连续触发会怎样
|
||
- 是否会和现有地图 pulse、HUD 动效、stage 效果冲突
|
||
|
||
### 验收侧
|
||
|
||
- 触发时机是否正确
|
||
- 结束时机是否正确
|
||
- 连续触发是否稳定
|
||
- `standard / lite` 是否都可用
|
||
- 低端机是否可接受
|
||
|
||
---
|
||
|
||
## 11. 归档说明
|
||
|
||
原来的：
|
||
|
||
- `animation-integration-spec.md`
|
||
- `animation-review-checklist.md`
|
||
|
||
已经归档到 [archive/animation](/D:/dev/cmr-mini/doc/archive/animation)，当前以本文件为统一入口。
|
||
|