用途:为图标、徽章、头像、状态指示器等小型视觉元素设计动画,借助迪士尼动画十二原则增强个性与有意义的交互反馈。
主要能力:覆盖挤压拉伸、预备动作、舞台化、逐帧与关键帧、跟随与重叠动作、缓入缓出、弧线、次要动作、时间节奏、夸张、扎实造型、吸引力等原则。例如心形图标点赞时可挤压拉伸,通知徽章到达时可弹跳,铃铛可先向后倾斜再向前摆动,状态指示器可脉冲。
时间参考:悬停缩放 100-150ms,点击反馈 50-100ms,徽章弹跳 300-400ms,铃铛响铃 400-600ms,状态脉冲 1500-2500ms,形变过渡 250-350ms。缓动方面,悬停用 ease-out,点击用 ease-in-out,弹跳可用 cubic-bezier(0.68, -0.55, 0.27, 1.55) 实现过冲。
使用方式:以 CSS 实现为主,涉及 transform(scale、rotate)、opacity、animation、SVG 的 fill/stroke 以及 filter 发光效果。资料给出悬停缩放、按下缩小、徽章弹跳、状态脉冲、铃铛响铃等关键帧示例。
适用场景:需要为小型 UI 元素增加个性与反馈的界面,如点赞、通知、状态提示、刷新、菜单开关等。
限制:资料未提供具体平台、框架版本、浏览器兼容性、性能开销、无障碍处理及安装命令等信息,暂未提供。