효과Effects / 원리 도해Explainer / Nº 388

경로 위 행렬Path Convoy

Path Convoy

경로 위 행렬

다른 이름Also known as · Motion path convoy · Sankey unit particle flow · 생키 단위 입자 흐름

388

렌더 추가 예정CLIP COMING경로 위 행렬Path Convoy정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 388. 경로 위 행렬 · Path Convoy · none

여러 물체나 단위 입자가 시간차 또는 일정 간격을 두고 같은 경로를 따라 이동한다.Objects follow the same path with staggered starts or fixed spacing.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

물류, 데이터 전달, 처리 흐름을 표현한다.Makes logistics, packet transfer, and processing flow visible.

언제 쓰나Use whenUSE WHEN

네트워크 경로의 패킷 전달을 보여줄 때
물류 경로를 따라 이동하는 단위를 설명할 때

Show packets traveling along a network route.
Trace a procession of units through a logistics path.

과용 주의AvoidAVOID

입자 수를 실제 처리량처럼 보이게 할 때 단위를 명시한다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 웹 UIWeb UI 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

여섯 점이 0.12초 간격으로 출발해 같은 경로를 2.4초 동안 통과한다.

과용 · 나쁜 사례OVERUSE

점의 간격을 수량과 무관하게 바꿔 흐름량이 변한 것처럼 보인다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
물체 수	6개	3~12개	같은 경로를 공유한다.
출발 간격	120ms	80~240ms	점별 시작 시각을 늦춘다.
경로 시간	2400ms	1600~4000ms	경로 전체를 통과하는 시간이다.
이징	none	none \| power2.out \| power2.inOut	데이터의 시간 진행은 none을 유지한다.

GSAP

const tl=gsap.timeline({paused:true});
const path=document.querySelector('.route'), length=path.getTotalLength();
document.querySelectorAll('.packet').forEach((el,i)=>{
  const state={p:0};
  tl.to(state,{p:1,duration:2.4,ease:'none',onUpdate:()=>{const q=path.getPointAtLength(state.p*length);gsap.set(el,{attr:{cx:q.x,cy:q.y}});}},i*0.12);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 경로 위 행렬를 구현해. 여러 물체나 단위 입자가 시간차 또는 일정 간격을 두고 같은 경로를 따라 이동한다. 물체 수 6개, 출발 간격 120ms, 경로 시간 2400ms, 이징 none를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 입자 수를 실제 처리량처럼 보이게 할 때 단위를 명시한다.

Implement Path Convoy for <target> in <file>. Objects follow the same path with staggered starts or fixed spacing. Use object count: 6; start spacing: 120ms; traversal duration: 2400ms; easing: none in a single paused GSAP core timeline that supports seeking. State the unit when particle count represents throughput.

Codex

<파일>의 <대상> 장면에 경로 위 행렬를 적용해. 물체 수 6개, 출발 간격 120ms, 경로 시간 2400ms, 이징 none를 사용하고 다음 동작을 구현해: 각 물체의 경로 진행값에 위상 또는 시작 지연을 적용한다. 플러그인과 Math.random 없이 작성하고 0.75초·1.8초·3초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 여섯 점이 0.12초 간격으로 출발해 같은 경로를 2.4초 동안 통과한다.

Apply Path Convoy to the <target> scene in <file> using object count: 6; start spacing: 120ms; traversal duration: 2400ms; easing: none. Objects follow the same path with staggered starts or fixed spacing. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.75, 1.8, 3 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. State the unit when particle count represents throughput.