작업 방식
motion-canvas는 TypeScript로 Motion Canvas 장면을 작성하기 위한 프레임워크 참조입니다. 제너레이터 기반 순서, 반응성 시그널, 참조와 장면 계층을 설명하고 도형, 텍스트, 패스와 미디어에 결합하는 방법을 보여 줍니다.
원문은 노드 저장·복원, 이름 있는 이벤트 대기, 백그라운드 스레드 실행과 사용자 정의 전환 종료 등 실제 상태·타이밍 기법을 포함합니다. 만들 장면은 이미 정했지만 이를 표현할 올바른 프레임워크 개념이 필요한 에이전트에게 유용합니다.
예상 산출물
- 프로젝트의 기존 설정을 사용하는 Motion Canvas 장면 코드.
- 재사용 가능한 시그널, 컴포넌트와 타이밍 시퀀스.
- 설정된 미리보기 및 렌더링 워크플로를 진행할 준비가 된 프로젝트.
브리프에서 검토까지
- 01장면 객체 정의
필요한 도형과 텍스트를 만들고 참조를 지정하며 명확한 노드 계층에 배치합니다.
- 02상태와 타이밍 연결
변하는 값에는 시그널을, 순서에는 제너레이터 함수를 사용합니다. 함께 실행하는 동작에는 all(), 애니메이션 종료를 기다리는 순서에는 yield*를 사용합니다. 이름 있는 waitUntil() 이벤트로 장면을 내레이션 큐에 맞출 수 있습니다.
- 03전환과 출력 확인
slideTransition() 시작 전에 들어올 장면의 노드를 추가해 전환 후 갑자기 나타나지 않게 합니다. 사용자 정의 useTransition()은 종료 함수를 반환하며 전환 애니메이션 후 반드시 호출해야 합니다. 설정된 미리보기나 렌더를 확인하고 프로젝트별 출력 설정을 유지합니다.