用途:该技能面向 200-300ms 时长的小型过渡动画,这一区间介于微交互与完整动画之间,用户会明确感知到运动,适合 UI 状态切换。
主要能力:给出迪士尼动画原则在此时长下的适用建议,包括挤压拉伸(10-15% 用于活泼界面,5% 用于专业界面)、预备动作(40-60ms 准备配合 200ms 主动作)、层次编排(主元素先行,次元素延后 50-100ms)、跟随动作(超出目标 5-10%)、缓入缓出、弧线运动、次要动作(淡入+缩放、移动+旋转)、时间(60fps 下 12-18 帧)、夸张程度、完整变换组合等。同时列出不适用情形:感觉瞬间完成、复杂角色动画、长距离移动、多阶段序列。
使用方式:提供缓动建议与实现模式,例如标准平滑过渡 transition: all 250ms ease-out; 模态/卡片出现 transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1); 弹跳个性 transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1); 专业微妙 transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1); 并给出 .modal 与 .card-expand 的 CSS 实现示例。
适用场景:模态对话框出现、卡片展开/收起、导航抽屉滑动、标签内容切换、筛选面板开关、图片缩略图展开、提示/通知滑入。
限制:资料未提供该技能的安装命令、平台支持、收费方式与具体效果数据,暂未提供。