用途:该技能用于设计界面中的小型反馈时刻,例如按钮状态、开关、表单校验、加载指示器和通知徽章,把迪士尼12项动画原则应用到这些细节上。
主要能力:提供原则与微交互实现的对照表,包括挤压拉伸(按钮按下压缩、开关回弹)、预备动作(悬停提示、点击前反馈)、舞台调度(聚焦当前元素)、逐帧与关键帧(进度与状态变化)、跟随与重叠(涟漪、回弹)、缓入缓出、弧线(开关、圆形菜单)、次要动作(图标随父状态响应)、时间控制(多数交互100-300ms)、夸张、扎实造型和吸引力。
使用方式:资料给出按钮、开关、复选框的CSS模式示例,以及悬停、点击、开关、复选框、焦点环、工具提示、徽章更新、表单错误的时长与缓动参考表。例如按钮过渡使用transition: transform 100ms ease-out;开关滑块使用cubic-bezier(0.34, 1.56, 0.64, 1)。
适用场景:需要为交互元素添加清晰、有目的且不干扰的反馈时使用。
限制与注意:每个交互元素都应有反馈;禁用状态不加动画并降低不透明度;相关反馈应分组;不要对每次变化都加动画;应在无动画情况下测试功能;需尊重prefers-reduced-motion。该技能基于Dylan Tarre的动画原则工作(MIT许可),由webconsulting.at改编。具体安装命令与平台支持暂未提供。