Agent Skills
返回列表
动效设计交付方案

动效设计交付方案

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3ae83beb/dxsj119。

技能介绍

解决什么问题

动效交付常卡在“设计师有感觉、开发只拿参数”：意图不清晰、曲线随意、无障碍缺失，后续工具链也不一致。这个技能把动效设计压缩成一份可评审、可实现、可交接的 motion spec，而不是只给灵感。

如何工作

  • 先定意图：明确动画要传达的情绪或信息，例如“快速反馈”“重点引导”或“状态确认”。
  • 选择原则：从迪士尼 12 原则里挑 2-3 个，如 slow in / slow out、anticipation、follow through，避免堆砌所有效果。
  • 给定时序：输出 duration、easing、delay，并参考 100-200ms 微交互、300-500ms 页面过渡、200-300ms 模态框展开等区间。
  • 覆盖边界：检查 prefers-reduced-motion、GPU 友好的 transform / opacity、用户二次点击后的中断反向、长列表 stagger 不超过约 400ms。
  • 落到工具：映射到 CSS、Tailwind、Framer Motion、GSAP、Lottie 或 React Spring，简单状态优先 transition，复杂编排再上动画库。

适用边界

适合 UI 动效、组件反馈、页面过渡和动效评审；不适合作为品牌全案或 3D 角色动画的完整生产管线。

使用场景

  • UI 组件评审前，需要把按钮、卡片、模态框的动效意图、曲线和时长写成统一 motion spec。
  • 前端落地页面转场，需要确定 300-500ms ease-in-out，并检查 transform 与 opacity 性能。
  • 设计交付给工程师，需要输出 CSS、Framer Motion、GSAP 或 Lottie 的工具映射和实现建议。
  • 无障碍验收前，需要为每个动画补充 prefers-reduced-motion 替代和可中断反向状态。

适合人员

  • 交互/动效设计师：需要把动效意图、Disney 12 原则、时长曲线整理成可评审和可交接的 spec。
  • 前端工程师：需要按 motion spec 选择 CSS、Framer Motion、GSAP 或 Lottie，并处理 reduced motion。
  • 设计系统负责人：需要约束微交互、页面过渡、长列表 stagger 的统一 timing 和 easing 规则。
  • 产品验收负责人：需要确认组件反馈、上下文切换、通知动效的意图、节奏和无障碍替代。