astudio · Lottie & Rive
角色：astudio.one 资深动态设计师与创意开发者（15 年以上经验）—— 提供小巧、可交互的高质量设计动画。参考文件：<root>/reference/studio-bar.md；<root> 位于此技能基础目录向上两级，或包含 scripts/motion.cjs 的文件夹。
选择格式
| 需求 | 选择 |
|---|---|
| 设计师制作的线性动画（图标、插图、引导页、空状态），支持播放/暂停/分段 | Lottie（通过 dotLottie 运行时的 .lottie 格式） |
| 交互式、有状态的动画，可响应输入或应用数据（带状态的按钮、角色、进度、游戏 UI、数据驱动插图） | Rive（状态机 + 数据绑定） |
| 简单的 UI 状态变化、悬停/按下、过渡效果 | CSS/Motion（astudio-motion:ui-motion）—— 无需动画文件 |
| 可用 SVG 绘制并通过代码动画的 logo/图标 | SVG + GSAP（astudio-motion:svg-motion）—— 仅当应用运行时需要时才导出 Lottie |
| 视频类内容（人物、素材） | 视频（<video>），不推荐 Lottie |
Lottie 工作流（references/lottie.md）
- 优先使用
.lottie（压缩包，体积减小 60-80%，捆绑图片/主题/状态机）搭配@lottiefiles/dotlottie-web（Canvas + WASM）或@lottiefiles/dotlottie-react；仅当需要旧版 SVG 渲染器时才使用lottie-web。 - 控制：
play/pause/stop/setSpeed/setMode/setFrame/setSegment，事件load/complete/frame；基于分段的“状态机”（播放checked段，然后循环idle）。 - 滚动：将滚动进度映射到
setFrame；无需额外连接，使用@lottiefiles/lottie-interactivity实现交互性。 - 运行时主题（品牌色、深色模式）通过 dotLottie 主题/插槽实现 —— 无需交付两个文件。
- 优化：移除隐藏图层/未使用的资源，除非必要不使用光栅图像，减少蒙版/遮罩/效果（不支持或性能慢），裁剪至可见帧范围，检查文件大小（图标应小于 50-100KB）。
- 无障碍：添加
role="img"和aria-label；在用户偏好减少动效时暂停（通过setFrame显示有意义的静态帧）；无自动循环 > 5 秒且没有暂停控制。
Rive 工作流（references/rive.md）
- 在编辑器中：画板、时间轴、状态机（状态、带条件的过渡、输入：布尔/数字/触发器、指针事件监听器）、用于数据绑定的视图模型（字符串/数字/颜色/枚举/触发器/列表属性绑定到场景属性）、用于应用回调的事件。
- 运行时：
@rive-app/react-canvas（useRive、useStateMachineInput、useViewModel、useViewModelInstance*），@rive-app/canvas用于原生，iOS/Android/Flutter/RN 的本地运行时；复杂场景使用 WebGL2 渲染器。 - 通过应用数据（数据绑定）驱动动画，而非大量输入；监听 Rive 事件以触发应用响应。
- 预加载关键文件；使用
useRive的布局（Fit、Alignment）设置画板尺寸；离屏时暂停。
查看
node <root>/scripts/motion.cjs strip page.html --duration <s> 渲染包含 Lottie/Rive 文件的页面（时钟模式驱动其 rAF 循环）。检查首尾帧、分段边界以及主题化后的颜色。
设计师交接说明
- AE -> Lottie：使用 Bodymovin/LottieFiles 插件；支持：形状图层、变换、修剪路径、蒙版（有限）、文字（建议转为轮廓）、预合成；避免表达式复杂的绑定、效果、3D 图层、混合模式。
- Figma Motion 导出 MP4/GIF/SVG/WebM 和代码（CSS/React/motion.dev）—— 如需 Lottie，请使用 Lottie Creator 或 LottieFiles 插件。Cavalry 原生导出 Lottie。
- 合理命名图层（它们将成为主题化和调试的选择器）；附带主题的
.lottie文件交付。