진행 중 목표 변경Motion Retargeting

Motion Retargeting

진행 중 목표 변경

다른 이름Also known as · Adaptive reverse easing · 중간 반전의 가감속 · Interrupt-and-retarget transition · 진행 중 목표 재설정 · Interruptibility / Reversibility · 중단·반전 가능성

021

렌더 추가 예정CLIP COMING진행 중 목표 변경Motion Retargeting정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 021. 진행 중 목표 변경 · Motion Retargeting · power2.out

이동 도중 목표가 바뀌어도 현재 위치에서 새 방향으로 자연스럽게 가감속한다When the target changes mid-move, the element eases from its current position toward the new direction.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

취소와 복귀, 데이터 갱신이 갑작스럽지 않게 보인다. 사용자의 의도 변경에 화면이 부드럽게 반응한다Cancellations, reversals and data updates look smooth. The screen responds gracefully to a change of intent.

언제 쓰나Use whenUSE WHEN

이동 중인 요소가 중간에 목적지가 바뀌는 인터랙션을 시연할 때
실시간 데이터가 갱신될 때 막대가 되돌아가지 않고 새 값으로 이어 갈 때

Demonstrate an interaction where the destination changes mid-move.
Let live data updates continue from the current value instead of resetting.

과용 주의AvoidAVOID

현재 위치를 새 시작값으로 쓴다(시작점 복귀 금지)
현재 속도를 이어 받을 수 있으면 이어 받는다

분류TagsTAGS

기본기Principles 피드백Feedback 순서·흐름Sequence 웹 UIWeb UI 제품 시연Product demo 데이터 스토리Data story 난이도 고급Advancedgsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

800ms 이동의 40% 지점(320ms)에서 목표가 바뀌고, 현재 위치에서 400ms 동안 새 목표로 이어진다. 위치 점프가 없다

과용 · 나쁜 사례OVERUSE

목표가 바뀌면 시작점으로 순간 이동한 뒤 새 tween을 시작해 점프한다. 속도가 0으로 떨어졌다 다시 출발한다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
첫 이동	800ms	600~1000ms	원래 목표 x 700
변경 시점	40%	30~60%	320ms
재이동	400ms	300~600ms	새 목표 x 200
이징	power2.out		재이동은 감속만

GSAP

tl.to('.dot', { x: 700, duration: 0.8, ease: 'power2.out' }, 0.2);
tl.call(() => {}, null, 0.52);
tl.to('.dot', { x: 200, duration: 0.4, ease: 'power2.out', overwrite: 'auto' }, 0.52); // 현재 위치에서 재시작

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 점이 x 700으로 0.8초 동안 power2.out으로 이동하다가 0.52초에 목표가 x 200으로 바뀌는 장면을 만들어줘. 현재 위치에서 0.4초, power2.out으로 새 목표로 이어 가게 하고 시작점으로 튀지 않게 해.

In <target>, make a dot move to x 700 over 0.8 seconds with power2.out, then at 0.52 seconds retarget it to x 200. Continue from its current position over 0.4 seconds with power2.out and no jump back to the start.

Codex

<파일>에 retarget motion을 구현해. 첫 tween x 700 / 0.8s / power2.out, 0.52초에 새 tween x 200 / 0.4s / power2.out, 현재 위치에서 시작. 0.5초, 0.52초, 0.53초를 캡처해 0.52초 전후 x 값이 연속인지(점프 없음), 그 뒤 x가 200으로 수렴하는지 확인해.

Implement retarget motion in <file>: first tween x 700 / 0.8s / power2.out, then at 0.52s a new tween x 200 / 0.4s / power2.out starting from the current position. Capture at 0.5s, 0.52s and 0.53s and verify x is continuous across 0.52s with no jump and converges to 200 afterward.