用途:该技能用于设计动画序列、页面过渡、微交互和加载状态等界面动效,核心原则是动画必须传达意义。每个动画应先回答三个问题:什么发生了变化、接下来该看哪里、这些元素之间有何关系;若无法回答其中至少一个,则该动画属于装饰,应当删除。
主要能力:提供动效规范的参考框架,包括时长、缓动、错峰和性能等方面的指导。时长方面:微交互(按钮、开关)100-200ms,状态变化(卡片展开、标签页)200-300ms,屏幕过渡250-400ms,复杂编排总计400-700ms;除加载指示器外不超过1秒。缓动方面:进入用ease-out(减速),离开用ease-in(加速),状态变化用ease-in-out,微交互用spring(stiffness 300-500)。错峰模式:项目间延迟50-80ms,最多错峰5项,其余立即出现;遵循阅读顺序,优先呈现重要项目。
使用方式:在设计动画前按上述三问判断必要性,并依据时长、缓动、错峰参考设定参数。每段动画都必须提供减少动态效果的替代方案:幻灯片改为淡入,弹性缩放改为立即出现,视差滚动改为静态,错峰揭示改为同时淡入,持续脉冲改为静态。交付物可包括含时长、缓动和触发条件的动效规格、每段动画的减少动态替代方案、性能注释,以及复杂编排的序列图。
适用场景与限制:适用于页面过渡、微交互、加载状态等界面动效设计,并可与设计主导、交互设计等上游技能衔接,输出给动效设计师、无障碍审查和设计构建等环节。性能上只应动画化transform、opacity和filter,因为它们是GPU合成的。不应动画化文字颜色变化(存在光敏风险)、性能路径中的布局属性,以及任何延迟任务完成或无法由用户控制的装饰性循环。资料未提供具体实现代码、平台或工具依赖。