连续循环动画(Continuous Loops)是一套关于如何制作无限重复动画的指导内容,适用于创建持续进行的动画,例如加载旋转指示器、脉冲指示器、环境动效、背景效果,或任何无限重复的动画。
在用途方面,它把迪士尼的十二动画原则应用到永远不会停止的动画上,帮助设计者理解循环动画与一次性动画在节奏、幅度和无缝衔接上的差异。
主要能力与原则应用方面,资料给出以下要点:挤压与拉伸方面,使用细微的缩放振荡(0.98-1.02)来营造有机的呼吸感,避免僵硬的机械循环。预备动作方面,将预备动作融入循环周期,在极值处短暂停顿后再反向。舞台布置方面,循环应起到支持作用而非主导,背景元素保持细微幅度。逐帧法与姿势对应法方面,设计能够无缝循环的关键帧姿势,结束帧必须自然流入起始帧。跟随与重叠动作方面,多部分循环的元素处于不同相位,三个圆点以 120° 相位偏移脉冲。缓入缓出方面,使用 ease-in-out 实现平滑振荡,线性运动会显得机械。弧线方面,圆周运动遵循真实弧线,旋转器旋转、钟摆摆动、轨道环绕。次要动作方面,在主要旋转之上叠加次要摆动,旋转器旋转时带有轻微弹跳。
在时序方面,资料给出参考:快速循环 500-800ms(旋转器、紧急指示器),中等循环 1000-2000ms(脉冲、呼吸),慢速循环 2000-4000ms(环境、背景)。夸张方面,循环应最小化使用夸张,因为重复本身已经足够吸引注意。扎实的绘画方面,循环必须无缝,结束与开始之间的任何跳变都会破坏错觉。吸引力方面,循环应当是催眠的而非恼人的,在 30 秒时测试是否仍然令人愉悦。
资料还给出时序推荐表:旋转器 600-800ms、linear(旋转)、infinite;脉冲 1500-2000ms、ease-in-out、infinite;骨架屏微光 1500ms、ease-in-out、infinite;打字点 1400ms、ease-in-out、infinite;呼吸 3000-4000ms、ease-in-out、infinite;漂浮 3000-5000ms、ease-in-out、infinite。
使用方式方面,资料提供实现模式代码,包括平滑旋转器的 CSS 动画(animation: spin 700ms linear infinite 与 @keyframes spin)、自然脉冲(animation: pulse 2000ms ease-in-out infinite 与 0%、100%、50% 关键帧)、错位圆点(animation: bounce 1400ms ease-in-out infinite,以及使用 animation-delay: 160ms、320ms 错开)。
性能规则方面,要求仅使用 transform 和 opacity,不使用布局属性;对超过 1 秒的循环添加 will-change: transform;使用 Intersection Observer 暂停屏幕外循环;遵循 prefers-reduced-motion,减少或停止循环。无缝循环公式方面,对于呼吸或脉冲,0% 和 100% 关键帧必须完全一致,对于更简单的乒乓效果可使用 alternate 方向。
适用场景包括加载状态、状态指示、环境氛围和背景装饰等持续动画需求。限制方面,资料未提供该技能的具体授权、收费或价格信息,暂未提供相关说明。