用途:当需要为未被特定技能覆盖的UI元素做动效,或想把通用动画原则统一应用到多种元素上时使用。它把迪士尼12项动画原则落地到界面动效中,追求一致、专业的运动表现。
主要能力与原则:挤压拉伸(交互时压缩与伸长,UI中控制在2%-5%);预备动作(重大动作前用50-100ms预动,先缩后放、先退后进);舞台调度(通过运动、大小、颜色、z-index、模糊对比建立层级);逐帧与关键帧(多数UI用先定起止状态的关键帧,粒子等有机动画用逐帧);跟随与重叠动作(子元素滞后于父级,相关元素错开20-50ms);缓入缓出(UI不用线性,进入用ease-out,退出用ease-in,过渡用ease-in-out);弧线(避免机械直线,横向过渡加入轻微纵向位移或边旋转边平移);次要动作(阴影、颜色、图标旋转、发光等辅助而不喧宾夺主);时间(微元素50-100/100-200/200-300ms,小元素150-200/200-300/300-400ms,中元素200-250/250-350/350-500ms,大元素300-400/400-600/600-800ms);夸张(庆祝场景可20%-30%,专业场景低于10%,错误状态可更明显);扎实绘画(保持圆角比例、阴影方向、间距节奏、字体尺度一致,动效中不变形);吸引力(顺滑建立信任,干脆反馈显灵敏,最好的动画是被感知而非被注意)。
使用方式:以CSS过渡为基础,为所有元素设置统一的timing函数,定义时长与缓动变量(--duration-fast:100ms、--duration-normal:200ms、--duration-slow:350ms及ease-out/ease-in/ease-standard/ease-bounce),再对任意交互元素套用transform、opacity、box-shadow的过渡。关键属性为transform、opacity、transition、animation、box-shadow。
适用场景:按钮、卡片、输入、模态、菜单、页面与遮罩等各类UI元素的动效设计。
限制:资料未提供具体平台、框架、收费与效果数据;数值与曲线为通用建议,需结合项目实际验证。