用途:为限时优惠、库存告急、倒计时、表单校验错误、通知角标、行动按钮和结账环节等场景制作促使用户立即行动的动画,传达时间敏感与紧迫感。
主要能力:以迪士尼动画原则逐条给出紧迫感动画的做法。挤压拉伸用快速形变制造冲击(落地挤压约15%-25%);预备动作极短或省略(0-50ms),直接响应;舞台化强调行动号召,高对比、隔离运动,其余元素退后;直线动作制造不可预测的抓眼运动,用于脉冲、抖动或紧急指示;跟随与重叠动作尽量少,急停传达果断;缓动采用非对称的快起急停,如 cubic-bezier(0.0, 0, 0.2, 1);路径走直线以体现速度;次要动作用脉冲、发光、抖动、弹跳角标持续吸引注意;时长快而有力(100-200ms),脉冲间隔1-2秒;夸张程度中到高(20%-40%);造型粗壮高对比;配色大胆(红、橙)并采用非对称动态构图。
使用方式:资料给出各元素时长与缓动建议,如注意脉冲150-200ms用ease-out、CTA弹跳200-300ms用ease-out-back、倒计时跳动100ms用linear、错误抖动300-400ms用ease-in-out;并提供 CSS 缓动变量 --urgency-snap: cubic-bezier(0.0, 0, 0.2, 1); --urgency-punch: cubic-bezier(0.25, 0.46, 0.45, 0.94); --urgency-bounce: cubic-bezier(0.34, 1.4, 0.64, 1); 以及 urgent-pulse、urgent-shake 两个关键帧模式。
适用场景:限时促销、低库存警告、倒计时、表单错误、通知角标、行动按钮、结账紧迫感。
限制与伦理:资料强调应诚实使用紧迫感,虚假稀缺会损害信任,仅用于真正时间敏感的情境。未提供具体平台、安装命令或收费信息。