用途:为加载指示器、旋转器、进度条和骨架屏提供动画设计原则,用迪士尼十二动画原则改善等待体验,让加载状态更生动、信息更明确。
主要能力:将十二原则逐条映射到加载场景。挤压拉伸用于弹跳圆点落地压扁、上升拉长;预备动作让进度条完成前短暂停顿或减速、旋转器停止前减速;舞台布置要求加载器清晰可见但不遮挡内容,骨架屏预演真实内容位置;顺画法与关键帧法分别适用于有机弹跳与进度条;跟随与重叠让多元素错开时序形成节奏;缓入缓出用于旋转与弹跳;弧线用于轨道式加载与抛物线弹跳;次要动作如旋转时发光脉冲、骨架屏微光;时间参数给出旋转800-1200ms、弹跳500-800ms、微光1500-2500ms、进度条更新200ms、圆点错开100-150ms、脉冲1000-2000ms;夸张程度需匹配品牌调性;扎实绘图要求描边一致、圆形为真圆、进度填充均匀;吸引力可降低感知等待时间。
使用方式:资料提供CSS实现示例,包括.spinner的spin关键帧、.bounce-dot的bounce关键帧与animation-delay错开、.skeleton的shimmer渐变背景动画。关键属性涉及transform的rotate/translateY/scale、animation无限循环、background-position微光、stroke-dashoffset用于SVG旋转器、opacity用于脉冲。
适用场景:网页或应用中的加载状态设计,适合需要提升等待体验、统一动画节奏的前端与设计协作。
限制:资料未提供具体安装命令、依赖、平台支持范围、收费信息或性能数据,暂未提供。