지도 경로 애니메이션Map Route Animation

Map Route Animation

지도 경로 애니메이션

다른 이름Also known as · Flow map · 지도 이동 경로 · Map Connection Draw · 지도 연결선 그리기 · Animated geographic route marker · 지도 경로 이동 표식 · Point along route

278

렌더 추가 예정CLIP COMING지도 경로 애니메이션Map Route Animation정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 278. 지도 경로 애니메이션 · Map Route Animation · none

지도 위의 곡선이 그려지고 표식이나 비행기가 경로를 따라 이동한다.A route is drawn as a marker travels along its geometry.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

출발지와 목적지, 이동 방향을 보여준다.Shows where movement starts, ends, and proceeds.

언제 쓰나Use whenUSE WHEN

서울에서 부산까지 선을 그리며 표식을 2초 동안 이동시킨다.
출발지와 목적지, 이동 방향을 보여준다. 기준값과 대상을 함께 표시할 때.

Explain origin, destination, and travel direction.
Keep the encoded values, labels, and visual state synchronized.

과용 주의AvoidAVOID

도식 경로와 실제 경로를 구분해 표기한다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

서울에서 부산까지 선을 그리며 표식을 2초 동안 이동시킨다.

과용 · 나쁜 사례OVERUSE

곡선만으로 실제 비행 경로와 속도를 단정한다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 지속	2000ms	1200~4000ms	길이 기준 이동
도착 강조	300ms	200~500ms	도착 이후 시작
경로 폭	4px	2~6px	지도 배경과 대비

GSAP

const tl=gsap.timeline({paused:true}),s={p:0},L=route.getTotalLength();
gsap.set(route,{strokeDasharray:L,strokeDashoffset:L});
tl.to(s,{p:1,duration:2,ease:'none',onUpdate:()=>{
 const q=route.getPointAtLength(s.p*L);
 marker.setAttribute('transform',`translate(${q.x} ${q.y})`);
 route.style.strokeDashoffset=L*(1-s.p);
}});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 지도 경로 애니메이션을 적용해. 지도 좌표의 베지어 경로를 그리며 이동체의 위치와 접선을 계산한다. 이동 지속 2000ms; 도착 강조 300ms; 경로 폭 4px을 적용한다. GSAP 코어의 paused 타임라인 하나로 seek 가능하게 만들고 임의 난수와 타이머를 쓰지 마.

Codex

<파일>의 설명 장면에서 <대상>에 지도 경로 애니메이션을 적용해. 지도 좌표의 베지어 경로를 그리며 이동체의 위치와 접선을 계산한다. 이동 지속 2000ms; 도착 강조 300ms; 경로 폭 4px을 적용한다. 0초, 1초, 2초를 캡처해 시작 상태, 중간 진행, 최종 상태를 확인하고 같은 시각으로 다시 seek했을 때 좌표와 라벨이 같은지 검증해.

Implement Map Route Animation on <target> in <file>. Draw and traverse the route over 2000ms with a 4px stroke and linear progress. Add a 300ms arrival pulse after the marker arrives. Use one paused GSAP core timeline, support seeking, and avoid random values and timers. Capture at 0s, 1s, and 2s to check the initial state, intermediate motion, and final state. Seek to each time again and verify identical geometry and labels.