163 lines
11 KiB
Markdown
163 lines
11 KiB
Markdown
|
# 交互动画创意方法
|
||
|
|
|
||
|
|
当用户询问“可以做什么效果”、只有目标没有动作方案，或现有动画缺少表达目的时读取本文件。
|
||
|
|
|
||
|
|
## 从作用开始
|
||
|
|
|
||
|
|
先确定动画承担的主要作用，只选一个主作用：
|
||
|
|
|
||
|
|
- 引导注意：让用户发现可以交互的对象。
|
||
|
|
- 解释关系：展示输入、过程、因果、层级或空间关系。
|
||
|
|
- 表达进度：让连续位置、阶段或完成度可感知。
|
||
|
|
- 提供反馈：确认悬停、拖拽、提交、成功、失败或等待。
|
||
|
|
- 奖励探索：让用户主动操作后获得有意义的变化。
|
||
|
|
- 营造情绪：建立轻快、克制、紧张、柔和或机械的节奏。
|
||
|
|
|
||
|
|
没有作用的动作只是装饰。装饰可以存在，但必须低成本、可暂停且不干扰内容。
|
||
|
|
|
||
|
|
需要案例时，按作用查阅 [网页动效参考模式](motion-patterns.md)。借用输入与反馈的关系、视觉锚点和信息节奏，再替换成用户自己的对象；不要把参考站的皮肤、题材或实现猜测当作默认方案。
|
||
|
|
|
||
|
|
## 先审计对象的运动潜力
|
||
|
|
|
||
|
|
不要从“场景视频、绿幕、雪碧图、视差、跟随鼠标”开始。先检查对象本身：
|
||
|
|
|
||
|
|
| 维度 | 要问的问题 | 常见变化 |
|
||
|
|
|---|---|---|
|
||
|
|
| 结构 | 由哪些层、壳体、部件和连接组成？ | 组装、拆解、爆炸图、剖切、折叠、展开 |
|
||
|
|
| 功能 | 输入、处理和输出是什么？ | 启动、传递、计算、充能、响应、完成 |
|
||
|
|
| 材质 | 表面和内部能否改变可见性？ | 透明、X 光、线框、液态、熔化、结晶 |
|
||
|
|
| 空间 | 用户应该从哪里看到哪里？ | 环绕、推进、拉远、穿越、进入内部、越过尺度 |
|
||
|
|
| 状态 | 前后状态有什么意义？ | 开关、空满、快慢、新旧、普通与专业模式 |
|
||
|
|
| 信息 | 哪些关系需要被理解？ | 分流、汇聚、映射、因果、比较、层级、反馈 |
|
||
|
|
|
||
|
|
一个手机可以从完整外观变成爆炸图、进入芯片内部、沿信号路径点亮，再重新组装。
|
||
|
|
一个软件产品可以从界面进入数据管线，展示处理过程后回到结果。例子只说明方法，不是
|
||
|
|
Skill 的默认题材。
|
||
|
|
|
||
|
|
## 动作语法
|
||
|
|
|
||
|
|
从下面选择能表达内容的动词，不要把所有变化塞进一条动画：
|
||
|
|
|
||
|
|
- 结构：assemble、disassemble、explode、separate、stack、fold、unfold、peel、cutaway。
|
||
|
|
- 形态：morph、inflate、compress、grow、dissolve、crystallize、flow。
|
||
|
|
- 材质：reveal、x-ray、wireframe、scan、heatmap、translucent。
|
||
|
|
- 空间：orbit、dolly、macro、fly-through、tunnel、parallax、scale-jump。
|
||
|
|
- 信息：trace、route、pulse、branch、converge、compare、highlight。
|
||
|
|
- 状态：activate、charge、complete、unlock、switch、transform。
|
||
|
|
|
||
|
|
## 把输入映射到变化
|
||
|
|
|
||
|
|
| 输入 | 连续参数 | 适合的视觉回应 | 参数结构 |
|
||
|
|
|---|---|---|---|
|
||
|
|
| scroll | 全页或局部进度、速度 | 拆解、组装、穿越、材质和章节转场 | linear |
|
||
|
|
| pointer | 方向、距离、速度 | 环绕视角、聚焦部件、剖切深度、光照扫描 | circular / 2d |
|
||
|
|
| drag | 位移、角度、拉伸量 | 直接拆分、撕开、旋转、比较前后 | linear / 2d |
|
||
|
|
| touch / orientation | 倾斜、方向、力度 | 重力、内部层差、液体、空间视差 | 2d |
|
||
|
|
| audio | 音量、频谱、节拍 | 频谱结构、脉冲、形变、排列 | linear |
|
||
|
|
| data / state | 数值、阶段、成功失败 | 流量、热力、完成度、模式切换 | linear / discrete |
|
||
|
|
|
||
|
|
### 转动与视向：先分清转的是什么
|
||
|
|
|
||
|
|
“转动 360°”至少对应四种完全不同的素材。合同里只写“转一圈”，模型就会自己挑一个旋转轴，所以先按下表分型：
|
||
|
|
|
||
|
|
| 类型 | 画面上发生什么 | 参数空间 | 输入映射 | 典型用途 |
|
||
|
|
|---|---|---|---|---|
|
||
|
|
| 圆周注视 | 脸始终朝向镜头，视线沿屏幕前方的一圈移动：12 点抬头、3 点看右、6 点低头、9 点看左，再回到 12 点；不露后脑勺 | circular | 指针相对主体中心的角度 | 吉祥物、头像、数字人跟随光标 |
|
||
|
|
| 二维注视 | 同样面向镜头，但上下与左右幅度分别变化，指针靠近中心时接近正视 | 2d | 指针的 x、y 分量 | 需要区分“看得多远”的角色 |
|
||
|
|
| 水平摆头 | 只绕竖直轴左右转，例如 -60° 到 +60°，两端是极限，中间是正视 | linear | 指针 x 或横向进度 | 横向巡视、侧向视差 |
|
||
|
|
| 展台自转 | 主体绕自身竖直中轴转满一圈，依次露出正面、侧面和背面 | circular | 拖动距离或滚动进度 | 手机、腕表、球鞋等硬件展示 |
|
||
|
|
|
||
|
|
圆周注视只用到方向角，指针远近不改变姿态。如果角色在指针靠近时应该接近正视、离远了才明显转头，就要用二维注视，不能拿一条环形视频代替。展台自转会露出侧面和背面：真实产品先用参考图生成 0°、90°、180°、270° 四张关键帧，再分四段生成；只给一张正面图让模型一次转完，背面就是模型猜出来的。
|
||
|
|
|
||
|
|
## 一镜到底：先想好接缝藏在哪里
|
||
|
|
|
||
|
|
滚动驱动的一镜到底，本质上是多段首尾相接的短视频（`K0 → K1 → K2…`）：上一段的尾帧就是下一段的首帧，每段只完成一级变化。场景切换发生在段内，靠某个一直在画面里的东西把前后两个世界接起来。所以先选“接缝藏在哪里”，再设计关键帧：
|
||
|
|
|
||
|
|
| 范式 | 接缝藏在哪里 | 交接关键帧怎么定 | 主要风险 |
|
||
|
|
|---|---|---|---|
|
||
|
|
| 尺度穿透 | 画面正中心的锚点物体 | 上一段的尾帧就是下一段的首帧，画面中心的小物体是下一段要推近的目标 | 每段只放大一级；跨度太大时模型会在途中换掉物体 |
|
||
|
|
| 遮挡转场 | 前景实体完全挡住镜头的那一帧 | 遮挡物占满画幅的同一张图，同时作为上一段尾帧和下一段首帧 | 遮挡不完全时，背景置换会露出来 |
|
||
|
|
| 形状匹配 | 两个场景里轮廓相同的物体 | 一段以圆形表盘为首帧、以同位置同大小的星球为尾帧，轮廓不动，只换表面内容 | 轮廓在段内移动或变形，就会像硬切 |
|
||
|
|
| 时间流转 | 锁死的机位和轮廓 | 用同一构图和姿态，生成不同年代或季节的状态图 | 模型容易顺带改几何；关键帧之间逐项对照结构 |
|
||
|
|
| 倒影穿越 | 眼睛、镜面或水滴里的倒影 | 一段以倒影特写为首帧、以倒影里的场景全景为尾帧，推进中倒影逐渐充满画面 | 特写帧里的倒影要足够清楚，提前生成锁定 |
|
||
|
|
| 剖切穿墙 | 外墙溶解成剖面或线框 | 完整外墙为首帧，剖开后的内部结构为尾帧 | 推进速度要匀，突然减速会让溶解看起来像卡住 |
|
||
|
|
|
||
|
|
整座城市折叠、重力翻转这类大范围形变，当前视频模型很难保持几何连续。只在用户明确要求时尝试，并先用 Pilot 验证。
|
||
|
|
|
||
|
|
选定范式后再检查三件事：
|
||
|
|
|
||
|
|
- **倒放是否成立。** scrub 模式下用户会往回滚：推进变成拉远，溶解变成复原，这些都自然；爆炸、泼洒这类倒放违反直觉的动作，要单独生成反向片段；分段播放的反向默认也是倒放同一段，同样要检查。
|
||
|
|
- **停在任意位置是否好看。** scrub 的每一帧都可能成为静止画面，不要靠运动模糊掩盖形变。
|
||
|
|
- **文字放在哪里。** 需要阅读的说明放在交接关键帧附近的稳定状态上，由页面层叠加，不写进视频。
|
||
|
|
|
||
|
|
## 判断语义与几何
|
||
|
|
|
||
|
|
- 部件连接、壳体开启、材质形变、关节、抓握、毛发、布料和遮挡属于语义运动，由关键帧约束下的 AI 视频生成。
|
||
|
|
- 位移、缩放、旋转、裁切、路径、惯性和参数映射属于几何运动，由程序完成。
|
||
|
|
- 只要移动整张图片会破坏接触或遮挡关系，就生成完整语义动作。
|
||
|
|
|
||
|
|
## 按显示尺度选择复杂度
|
||
|
|
|
||
|
|
- 小型控件：动作短、轮廓清晰、状态明确，只生成必要的短片段和少量帧。
|
||
|
|
- 内容插画：允许一个主要语义动作，控制持续时间和资源体积。
|
||
|
|
- Hero 或全屏叙事：先锁 Concept Contract 的背景归属，再做资源预算；路线选择按
|
||
|
|
[delivery-selection.md](delivery-selection.md) 的决策顺序执行。
|
||
|
|
- 长页面连续滚动：区分全页进度和局部章节进度，不默认把整页映射到一条视频。
|
||
|
|
|
||
|
|
## 让三个方向真正不同
|
||
|
|
|
||
|
|
方向必须来自对象本身，而不是沿用上一个项目。同一个对象先从结构、空间或镜头、材质或状态三类变化里各想一个方向，再挑出最多三个。用户已经明确动作时，不为凑数量增加无关方向。
|
||
|
|
|
||
|
|
三个方向至少在两项上不同：
|
||
|
|
|
||
|
|
- 不同驱动方式。
|
||
|
|
- 不同参数空间。
|
||
|
|
- 不同表达作用。
|
||
|
|
- 不同运动主体或结构。
|
||
|
|
- 不同关键状态或镜头路径。
|
||
|
|
|
||
|
|
避免给出三个只是速度、幅度或颜色不同的同类方案。
|
||
|
|
|
||
|
|
## 方向卡
|
||
|
|
|
||
|
|
每个方向写一张简短的方向卡，方便用户比较和挑选：
|
||
|
|
|
||
|
|
1. **表达目的**：用户通过这次交互新理解了什么，或完成了什么。
|
||
|
|
2. **起止状态与锚点**：起始和最终画面是什么，哪些身份、结构或阅读位置始终不变。
|
||
|
|
3. **真正变化的部分**：哪些结构、材质或镜头发生变化；镜头移动时写清轨迹。
|
||
|
|
4. **输入与回应**：输入怎样映射到进度或状态；停手、反向和再次触发时画面怎样回应。
|
||
|
|
5. **制作分工**：哪些画面由关键帧锁定，哪些变化交给视频模型，哪些文字、布局和状态由程序实现。
|
||
|
|
6. **成本与替代**：目标尺寸下的清晰度、帧数和加载成本，触屏怎么操作，静态替代是什么，以及最需要先验证的风险。
|
||
|
|
|
||
|
|
借用了外部案例时，再写明案例链接、实际看到的现象，以及哪些只是推测，见 [motion-patterns.md](motion-patterns.md)。
|
||
|
|
|
||
|
|
## 把方向变成关键帧
|
||
|
|
|
||
|
|
需要生成素材时，生产顺序固定为“先生图，再生视频”。每个方向先回答：
|
||
|
|
|
||
|
|
1. 起始图是什么。
|
||
|
|
2. 结束图是什么。
|
||
|
|
3. 是否需要中间关键帧才能让变化稳定。
|
||
|
|
4. 哪两张相邻关键帧组成一段视频。
|
||
|
|
|
||
|
|
- 真实产品的 Logo、孔位、部件数量和比例不能漂移时，用原始产品图作为参考生成并验收每张关键帧，不让视频模型凭文字猜终点。
|
||
|
|
- 单段视频只完成一个主要语义变化，例如“整机拆开”或“镜头进入芯片”。
|
||
|
|
- 多阶段叙事使用 `K0 → K1 → K2…`：先验收全部计划关键帧，再从 Pilot 开始逐段生成视频。
|
||
|
|
- 文字、数字、进度和高亮由程序在运行时叠加；主要画面与转场仍来自关键帧约束的 AI 视频。
|
||
|
|
|
||
|
|
例如“手机完整态 → 爆炸图 → 芯片特写 → 重新组装”需要四张关键帧和三段视频，
|
||
|
|
不是一条长提示词。这样每段更稳定，也便于滚动正反播放和单独重做。
|
||
|
|
|
||
|
|
## 创意质量门槛
|
||
|
|
|
||
|
|
拒绝以下方向：
|
||
|
|
|
||
|
|
- 用户输入与画面变化没有可理解的关系。
|
||
|
|
- 动画只有自动播放，没有交互带来的新信息或反馈。
|
||
|
|
- 静止状态不成立，必须一直运动才能看懂。
|
||
|
|
- 用高成本栅格视频实现简单几何运动。
|
||
|
|
- 为了使用已有视频而强行选择不匹配的参数模型。
|
||
|
|
- 只能在演示尺寸成立，缩小或触屏后失去意义。
|
||
|
|
- 用赛博霓虹、机械电路、发光细线这类套路装饰填满画面，掩盖结构和镜头上的问题。
|
||
|
|
|
||
|
|
选定方向后，把它转换为 Motion Brief，再进入资源预算、生成和实现。
|