continuous-loops

连续循环动画

将迪士尼的 12 条原则应用于永不停止的动画。

原则应用

挤压与拉伸：轻微的缩放振荡（0.98-1.02）能营造自然的呼吸感。避免僵硬机械的循环。

预备动作：在循环周期中加入预备动作。在到达极限位置后稍作停顿，再反向运动。

演出布局：循环动画应起到辅助作用，而非喧宾夺主。背景元素的振幅应保持轻微。

连续动作与关键姿势：设计能够无缝循环的关键帧姿势。结束帧必须自然衔接起始帧。

跟随动作与重叠动作：多部分组成的循环中，各元素应处于不同的阶段。三个圆点以 120° 的相位差脉动。

慢入与慢出：使用缓入缓出实现平滑振荡。线性运动看起来会很机械。

弧线运动：圆周运动应遵循真实的弧线。旋转器旋转，摆锤摆动，轨道运动沿圆周运行。

次要动作：在主要旋转之外加入次要摇摆。旋转器旋转时轻微弹跳。

节奏：

• 快速循环：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

实现模式

/* Smooth spinner */
.spinner {
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Organic pulse */
.pulse {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Staggered dots */
.dot {
  animation: bounce 1400ms ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 160ms; }
.dot:nth-child(3) { animation-delay: 320ms; }

性能规则

1. 仅使用 transform 和 opacity——不要使用布局属性
2. 对时长超过 1 秒的循环添加 will-change: transform
3. 使用 Intersection Observer 暂停屏幕外的循环
4. 遵循 prefers-reduced-motion——减少或停止循环

无缝循环公式

对于呼吸/脉动动画：0%, 100% 关键帧必须完全相同。使用 alternate 方向可简化往返效果。