用途:为通知、Toast、Alert、Snackbar 等系统消息设计动画,使提醒既能吸引注意又不过度干扰。
主要能力:把迪士尼十二动画原则映射到通知场景。挤压拉伸用于入场落定感;预期动作在自动消失前轻微收缩(95% 缩放、100ms)提示即将离开;舞台化要求位置一致并用颜色与图标区分 info、success、warning、error;定义进入、可见、退出、堆叠等状态与关键帧;跟随与重叠动作让图标在容器到位后绘制、进度条随后启动;缓动上入场用 ease-out、退出用 ease-in,弹跳可用 cubic-bezier(0.68, -0.55, 0.27, 1.55);弧线用于角落滑入与铃铛摆动;次要动作叠加阴影、图标、进度条;时间建议为入场 200-300ms、退出 150-250ms、自动消失 3000-5000ms、注意脉冲 1000ms 循环、成功勾选绘制 300ms、堆叠重排 200ms;夸张用于错误抖动或红色脉冲,按紧急程度匹配;实心绘图要求尺寸一致、图标清晰、进度条用 transform 而非 width;吸引力强调平滑动画更显专业。
使用方式:以 CSS 实现,示例中 .toast 使用 toastEnter 300ms 弹跳曲线,.toast.exiting 使用 toastExit 200ms ease-in forwards,关键帧从 opacity 0、translateY(-100%) scale(0.9) 过渡到 opacity 1、translateY(0) scale(1),退出则位移到 translateX(100%) 并淡出;进度条设 transform-origin: left 并线性播放 4000ms。关键属性包括 transform、opacity、animation、transform-origin、box-shadow。
适用场景:前端界面中的各类系统消息与状态提示。
限制:资料未提供具体框架集成、无障碍处理、浏览器兼容性及性能测试数据。