用途:该技能用于元素在原地发生状态变化时的动画设计,例如开关切换、手风琴展开、复选框动画、按钮状态等不离开原位的变形。它把迪士尼动画十二原则映射到界面状态切换上,帮助设计出自然、可逆、令人满意的过渡效果。
主要能力:给出各原则的具体应用方式,包括挤压拉伸(开关滑动前压缩约5%)、预备动作(展开前反向移动2-3px)、舞台调度(变换聚焦于交互点)、逐帧与姿势对姿势(明确定义静止、悬停、激活、禁用等状态)、跟随与重叠(图标先旋转、标签后淡入)、慢入慢出(双向变化用cubic-bezier(0.4, 0, 0.2, 1))、弧线(箭头绕中心旋转)、次要动作(滑动+变色+图标切换)、夸张(过冲2px后回稳)、扎实绘图与吸引力等。
时长建议:微状态100-150ms(复选框勾选、单选填充);标准状态150-250ms(开关、手风琴);复杂状态250-400ms(多部件变换)。具体如复选框150ms ease-out、开关200ms ease-in-out、单选150ms ease-out、手风琴250ms ease-in-out、标签切换200ms ease-in-out、按钮激活100ms ease-out缩放至0.97、卡片展开300ms ease-in-out。
使用方式:提供CSS实现模式,如.toggle使用transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1),开关旋钮用cubic-bezier(0.34, 1.56, 0.64, 1)实现过冲;手风琴用grid-template-rows从0fr过渡到1fr。
关键规则:状态变化是可逆的,向状态B的动画应是向状态A动画的逆过程,需双向测试。
限制:资料未提供该技能的安装命令、平台支持范围、收费方式或兼容性说明。