Trim Paths: 라인 드로잉 효과
Start/End/Offset 세 파라미터로 경로를 잘라 라인이 그려지는 애니메이션을 만든다.
Trim Paths는 모션 그래픽에서 가장 많이 쓰이는 Shape Layer 연산자다. 로고 드로잉, 아이콘 등장, 진행 바, 로딩 인디케이터 모두 Trim Paths 하나로 만든다.
Trim Paths는 Shape Layer의 Add(추가) 메뉴에서 넣을 수 있는 연산자(Operator)다. Path의 시작점(Start)부터 끝점(End)까지 어느 구간을 보여줄지 퍼센트로 제어한다. Offset은 전체 구간을 경로를 따라 회전시킨다.
| 파라미터 | 범위 | 역할 | 대표 사용법 |
|---|---|---|---|
| Start | 0~100% | 경로 시작 지점 | 0% → 100%: 사라지는 효과 |
| End | 0~100% | 경로 끝 지점 | 0% → 100%: 그려지는 효과 |
| Offset | -360°~360° | 구간 전체를 회전 | 로딩 스피너 |
클래식 드로잉 레시피 — Start: 0%, End: 0% → 100% (1초 Easy Ease). 이것만으로 로고, 텍스트, 아이콘이 한 획씩 그려지는 애니메이션이 완성된다. Stroke만 있고 Fill이 없는 상태에서 적용해야 깔끔하다.
로딩 스피너 만들기 — 원(Ellipse)에 Stroke만 적용하고 Trim Paths를 추가. Start와 End 차이를 25%로 유지하면서 Offset을 0° → 360°로 루프 애니메이션하면 끝없이 도는 로딩 스피너가 된다. Enable Expression: `loopOut('cycle')` 한 줄이면 무한 반복.
Trim Multiple Shapes — Trim Paths의 적용 범위에 주의한다. 'Simultaneously'(동시)는 모든 Path를 하나로 취급하고, 'Individually'(개별)는 각 Path에 독립 적용한다. 글자 하나하나를 순서대로 그리려면 Individually를 선택해야 한다.
Trim Paths에서 End 값을 0%에서 100%로 애니메이션하면 경로가 서서히 그려지는 효과가 만들어진다. (O/X)
Trim Paths에서 여러 Path를 각각 독립적으로 트리밍하려면 어떤 모드를 선택해야 하는가?