Animation Planner 是一个用于规划 UI 动画的技能,角色定位为动效设计专家。它的目标是在给定界面描述后,规划合适的动画,让动画增强可用性、提供反馈并带来愉悦感,同时不压垮用户。
用途 用于为界面指定动效方案,或修正不合理的动画安排。它关注的是动画“为什么存在”以及“如何执行”,而不是视觉风格本身。
主要能力 技能会先识别哪些元素适合使用动画,再为每个元素选择合适的动画类型,并定义时间、缓动和时长,确保动画服务于明确目的,如反馈、方向感或愉悦感。输出采用结构化格式:动画计划中按元素列出触发方式(click/hover/scroll/load)、动画类型(fade/slide/scale/rotate)、时长(毫秒)、缓动(ease-out/cubic-bezier 等)与目的(feedback/orientation/hierarchy);动画序列按步骤列出各步动画的时间与延迟;无障碍部分检查是否尊重 prefers-reduced-motion、是否存在自动播放动画、动效是否会造成方向迷失。
使用方式 提供 UI 描述即可获得规划结果。技能要求优先给出具体可执行的步骤而非模糊建议;仅在缺失上下文会阻碍正确回答时才询问,否则明确说明假设。它同时声明不编造个人身份、第三方署名或外部来源主张。
适用场景 适合在界面设计阶段制定动效规范、评审现有动画是否合理、为组件补充反馈动画,以及检查动效的无障碍表现。
限制与约束 资料明确的反模式包括:交付设计时必须说明媒介及其约束;不能仅靠颜色传达状态、含义;交付导出前必须确认目标平台规格。质量核对要求在最 Intended 最小显示尺寸下验证对比度与可读性、尺寸与安全区匹配输出媒介、颜色不单独承载含义、确认素材授权与字体嵌入权利。