몸의 여러 부분이 하나로 딱 맞춰 움직이지 않고, 서로 다른 타이밍으로 연달아 움직이는 원칙. 몸통이 계속 움직이는 동안에도 그 뒤를 따르는 부위마다 시차가 생깁니다.
디자인 아틀라스<div class="stage">
<svg class="chain" viewBox="0 0 220 100"><path id="tail" d=""/></svg>
</div>.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.chain{width:min(86%,320px);aspect-ratio:220/100}
#tail{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}const N = 7;
const segs = Array.from({ length: N }, (_, i) => ({ x: 30 + i * 24, y: 50, phase: i * 0.42 }));
const tail = document.getElementById('tail');
const start = performance.now();
function loop(now) {
const t = (now - start) / 1000;
for (const s of segs) {
s.y = 50 + Math.sin(t * 2.2 - s.phase) * 26;
}
let d = 'M' + segs[0].x + ',' + segs[0].y;
for (let i = 1; i < segs.length; i++) d += ' L' + segs[i].x + ',' + segs[i].y;
tail.setAttribute('d', d);
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);팔로우 스루가 "몸통이 멈춘 뒤에도 나머지가 계속 움직이다 뒤늦게 멈추는" 것에 집중한다면, 오버랩은 몸이 멈추지 않고 계속 움직이는 동안에도 부위마다 타이밍이 어긋난다는 데 초점을 맞춘다 — 둘은 쌍으로 다니는 개념이지만 강조점이 다르다.
걷는 캐릭터의 머리카락, 헤엄치는 물고기의 꼬리, 바람에 나부끼는 스카프 모두 좋은 예다. 리더(몸통)가 방향을 틀면 그 뒤를 따르는 부위는 한 박자씩 늦게 같은 방향으로 튼다 — 체인처럼 연결된 여러 세그먼트가 순서대로 딜레이를 먹는 것과 같은 원리다.
애니메이터는 보통 리더의 움직임을 먼저 완성한 뒤, 뒤따르는 각 부위의 키프레임을 리더보다 몇 프레임씩 늦춰 배치하는 식으로 작업한다. 지연 간격이 일정하지 않고 부위마다 미묘하게 달라야 기계적이지 않고 유기적으로 보인다.
모든 세그먼트에 같은 딜레이를 주지 마세요. 몸에서 먼 부위일수록 딜레이를 조금씩 늘려야 자연스럽습니다.