用途:当页面需要动效编排、交互打磨与滚动行为,且要在不损害性能的前提下增强层级时使用。核心原则是“动效跟随结构”。主要能力与流程:先确认页面已选定的主导布局思路;判断真正需要的动效任务(入场序列、悬停反馈、粘性叙事、产品演示、状态过渡);从 references/motion_profiles.md 选择一个动效配置;若页面使用粘性或滚动主导的叙事,加载 references/scroll_choreography.md;从 references/interaction_patterns.md 选择交互模式;如需措辞帮助,加载 references/prompt_recipe.md;执行 references/performance_guardrails.md 中的约束;最后用 references/review_rubric.md 做终审。
默认分区与动效配对:hero→分阶段揭示;bento→错落深度;sticky story→进度关联过渡;proof rail→持续漂移;CTA→触感式悬停/按压。除非简报明确要求,否则以此为结构默认值。
与设计技能配合:作为伴随层使用,而非替代布局判断。典型搭配是 $design-skill 决定结构、层级与风格方向,$animation-director 决定时序、交互行为、滚动编排与动效克制。若尚无强结构,应先修布局。
好的动效应让阅读顺序更清晰、强化层级、让 UI 有触感、让产品界面有生命力、在真实设备上保持性能、尊重各分区的结构角色。差的动效则是装饰弱布局、到处循环、与内容竞争、无必要地动画布局属性、对每个分区都用同样的 fade-up。
组合规则:先明确页面结构再选动效;把最大的动效预算集中在一两处;让安静的分区保持安静;视觉密集分区应降低动画复杂度;若动效不能改善阅读顺序、可供性或说服力,就删除。输出期望:把动效限定在有意义的地方;优先使用 transform 与 opacity;避免强迫持续重渲染的动画系统;保持可访问性与可读性;按简报而非个人喜好调节强度;移动端清晰度下降时简化或移除装饰性动效。限制:资料未提供具体安装命令、价格、平台或效果数据,具体参考文件内容暂未提供。