find-animation-opportunities｜合适的动画效果

作者 Emil

✏️ 介绍 Finding Animation Opportunities 是一个用于发现界面动效机会的 Figma Skill。它会扫描代码库或 UI，判断哪些地方确实值得增加动画、哪些地方反而不应该动，并给出具体的动效参数建议。它只负责分析和提出方案，不会修改代码或直接实现动画。 🔨 功能 1. 扫描界面中缺少动效但可能值得补充的交互节点 2. 重点检查按钮反馈、状态切换、内容出现/消失、面板展开、列表变化等场景 3. 每个候选动效都会经过 Frequency、Purpose、Speed、Function 四层判断 4. 会主动拒绝高频、信息密集或纯装饰性的动画需求 5. 对键盘快捷操作、Command Palette 等高频场景默认不建议增加动画 6. 可识别 Feedback、Spatial Consistency、State Indication、Preventing a Jarring Change、Explanation、Delight 等不同动效目的 7. 为每个建议提供具体 Duration、Easing、Transform、Opacity 等参数 8. 会根据组件类型控制动画时长，例如 Press Feedback、Popover、Dropdown、Modal 等使用不同时间范围 9. 支持检查 Accordion、Conditional Render、Toast、Drawer、Popover、List、Empty State、Success State 等常见界面结构 10. 可识别缺少 :active 状态的可点击元素，并建议轻量 Press Feedback 11. 可识别突然出现或消失的内容，并建议 Fade、Scale、Height 等过渡方式 12. 可识别缺少空间关联的 Panel、Popover、Menu，并根据 Trigger 建议 Transform Origin 13. 支持识别 Drag / Swipe 场景，并建议 Spring、Velocity Dismissal、Rubber Banding 等交互方式 14. 对首次使用、成功完成、空状态等低频场景，可适当建议更有表现力的 Delight Motion 15. 会优先复用项目已有的 Motion Token、Duration 和 Easing，而不是重新创造一套规则 16. 输出最多 5–7 个高价值建议，避免把界面过度动画化 17. 报告会同时列出被明确拒绝的候选项，并说明为什么不应该加动画 18. 每条建议会标注具体文件位置、当前问题、动效目的、使用频率和推荐方案 19. 支持 Reduced Motion，并强调动效应尽量使用 Transform 和 Opacity 20. 适合在“这个界面哪里可以加点动效”“怎么让产品更有生命力”这类需求下使用 21. 如果需要修复已有动画，应改用 improve-animations 或 review-animations 22. Skill 本身为只读分析，不会修改源代码或直接实现动效