用途:把迪士尼十二动画原则(缓动、预备动作、跟随动作、次要动作、时间、挤压拉伸、舞台调度、弧线、夸张、立体感、吸引力、逐帧与关键帧)迁移到界面动效设计中,帮助改进动画质量、设计微交互、创建缓动曲线,以及为设计系统编写动效规范。
主要能力:给出十二原则在 UI 中的对应应用与优先级(如缓动、时间、舞台调度为必备或高优先级);提供缓动曲线、时长刻度、按钮按压、模态与下拉、列表错峰入场、开关、成功庆祝、错误抖动、3D 翻转等 CSS 关键帧与过渡写法;给出 React 错峰列表与 react-spring 物理动画示例;附动效审查清单。
使用方式:在需要设计或评审界面动效时参考对应原则与代码片段,按元素进入用 ease-out、退出用 ease-in、停留用 ease-in-out 的惯例选择缓动,并按距离与重要性选择时长。
适用场景:微交互与过渡设计、动效质量评审、团队动效基础培训、设计系统动效指南编写。
限制:资料未提供安装命令、收费与价格、平台支持范围及具体效果数据;示例代码需按项目实际调整,且必须尊重 prefers-reduced-motion 用户偏好。