Universal Animation Patterns 是一个面向界面动画的通用规范模块,属于 animation-principles 技能集合。它的定位是:在创建任何类型的动画时,提供可复用的基础时长、缓动和原则应用,作为所有界面动效的默认基线。
用途 该模块将迪士尼的12项动画原则作为任何动画的基线默认值,用于统一界面动效的节奏与手感,避免每次从零决定时长和缓动曲线。
主要能力
- 提供核心时间尺度,按类别给出时长与适用场景:即时(100-150ms)用于悬停、切换、微状态;快速(150-250ms)用于反馈、小过渡;标准(250-400ms)用于弹窗、揭示、状态变化;慢速(400-600ms)用于页面转场、序列;刻意(600-1000ms)用于戏剧性揭示、庆祝动画。
- 提供通用缓动库(CSS 自定义属性),包含标准缓动与弹簧缓动:ease-out 用于入场,ease-in 用于退出,ease-in-out 用于状态变化,spring 用于过冲,bounce 用于俏皮效果。
- 提供12项动画原则速查:挤压与拉伸(0.95-1.05缩放范围)、预备动作(2-3px反向移动或50ms停顿)、舞台布置、顺画与关键帧、跟随动作(过冲2-5%后回落)、慢入慢出(除旋转加载外永不线性)、弧线、次要动作(最多叠加2-3个属性)、时间、夸张(UI中低于10%偏差)、扎实造型、吸引力。
- 提供基础动画类,包含入场、退出、状态过渡三类,以及对应的 fade-in 与 fade-out 关键帧定义。
- 提供通用规则:100ms响应时间、UI动画不超过400ms、始终提供 prefers-reduced-motion 替代、仅使用 transform 与 opacity 以保证60fps、退出比进入快20-30%。
- 提供无障碍默认样式,在 prefers-reduced-motion: reduce 时压缩动画与过渡时长。
- 提供决策树,用于判断入场、退出、状态变化、连续动画、手势响应等场景应选用的缓动与时长;不确定时以 250ms cubic-bezier(0.4, 0, 0.2, 1) 为起点。
使用方式 该模块提供的是可复制的 CSS 片段:缓动库以 :root 自定义属性形式给出,基础动画类以类名加 animation/transition 声明给出,关键帧以 @keyframes 定义给出,无障碍处理以媒体查询形式给出。开发者可直接将对应代码片段放入样式表使用。该模块未提供安装命令或包管理安装方式。
适用场景 适用于创建任何类型的界面动画,包括悬停、切换、微状态、反馈、小过渡、弹窗、内容揭示、状态变化、页面转场、序列、戏剧性揭示与庆祝动画等。
限制 该模块未提供具体的框架集成方式、构建工具配置或运行时依赖说明;未涉及性能测量工具与具体浏览器兼容性数据;所有数值与代码以资料给出为准,未提供的功能、收费、平台或效果信息暂未提供。