Motion Canvas 애니메이션 & 디자인

Motion Canvas의 애니메이션 시스템 — Scenes, 노드 트리, signal, tween, layout — 의 핵심 개념과 API를 다룬다.

🎬 Scene = 최상위 단위

Motion Canvas의 모든 애니메이션은 Scene 함수 안에 있다. makeScene2D()로 정의하고 yield*로 시간을 제어한다.

import {makeScene2D, Circle} from '@motion-canvas/2d';

export default makeScene2D(function* (view) {
  const circle = createRef<Circle>();
  view.add(
    <Circle ref={circle} size={200} fill={'#3b82f6'} />,
  );

  yield* circle().size(400, 1);      // 1초 동안 크기 200→400
  yield* circle().fill('#ef4444', 1); // 1초 동안 색 변경
  yield* waitFor(0.5);                // 0.5초 대기
});

함수가 곧 애니메이션 — JSX로 노드 트리를 만들고, yield*로 시간 흐름을 정의한다.

🌳 노드 트리 (Hierarchy)

모든 시각 요소는 노드고, 부모-자식 관계로 트리를 이룬다:

<Layout direction={'column'} gap={20} alignItems={'center'}>
  <Txt text={'Title'} fontSize={64} />
  <Rect width={400} height={200} fill={'#1e40af'} radius={20}>
    <Circle size={100} fill={'#fbbf24'} />
  </Rect>
</Layout>

노드	역할
`Layout`	Flexbox 자식 정렬
`Rect`	사각형 (배경/박스)
`Circle`	원
`Txt`	텍스트 (FontFamily/fontSize)
`Img`	이미지 (`src` URL)
`Video`	비디오 (선택)
`Polygon`, `Line`, `Spline`	도형
`Node`	모든 노드의 베이스

자식 노드는 부모의 position, scale, opacity 등을 상속한다.

📐 좌표계 (Cartesian)

Motion Canvas는 수학 좌표계 (Y축 위가 +):

        +y
         │
         │
   ──────┼──────  +x
         │
         │

중심: (0, 0)
위 = 양수 y, 오른쪽 = 양수 x
회전: 시계 반대 방향이 양수 (수학 관습)

circle().position(300, 200);  // 우상단으로 이동
circle().rotation(45);        // 45° 반시계 회전
circle().scale(1.5);          // 1.5배 확대

🎚️ Signal — 시간에 따라 변하는 값

Signal은 0차원적인 시점 값. createSignal(0)로 만들고 yield*로 시간에 따라 변형:

import {createSignal} from '@motion-canvas/core';

const opacity = createSignal(0);
view.add(<Circle opacity={opacity} />);

yield* opacity(1, 1);   // 1초에 걸쳐 0→1
yield* opacity(0, 1);   // 1초에 걸쳐 1→0

Signal을 노드 속성에 직접 바인딩하면 자동으로 보간(tween).

Signal의 3가지 보간 모드

메서드	의미
`signal.to(value, duration)`	`value`까지 `duration`초에 걸쳐 보간
`signal.to(value, duration, easing)`	easing 함수 함께
`signal(value, duration)`	짧은 표기 (to와 동일)

🎨 Tweening — 보간 패턴

시간 기반

yield* circle().position.x(300, 1);  // 1초에 걸쳐 이동
yield* circle().fill('#ef4444', 0.5);

Easing

import {easeInOutCubic, easeOutBack, linear} from '@motion-canvas/core';

yield* circle().position.x(300, 1, easeInOutCubic);
yield* circle().size(400, 1, easeOutBack);  // 살짝 오버슈팅

Easing	용도
`linear`	기계적 움직임
`easeInOutCubic`	부드러운 가속/감속
`easeOutBack`	오버슈팅 (탄성)
`easeOutElastic`	진동
`easeInBounce`	바운스

다중 동시 애니메이션

yield* all(
  circle().position.x(300, 1),
  circle().fill('#ef4444', 1),
  txt.opacity(1, 0.5),
);

all(), sequence(), waitFor() 조합으로 복잡한 시퀀스 구성.

📏 Layouts (Flexbox)

Layout 노드는 자식을 Flexbox처럼 배치:

<Layout direction={'row'} gap={40} alignItems={'center'} padding={20}>
  <Circle size={100} fill={'#3b82f6'} />
  <Circle size={100} fill={'#ef4444'} />
  <Circle size={100} fill={'#22c55e'} />
</Layout>

속성	값	기본
`direction`	`row` \| `column`	`row`
`gap`	숫자	`0`
`alignItems`	`start` \| `center` \| `end`	`start`
`justifyContent`	`start` \| `center` \| `end` \| `space-between`	`start`
`padding`	숫자	`0`
`wrap`	`wrap` \| `nowrap`	`nowrap`

🔗 노드 참조 (Refs)

createRef<T>()로 노드를 잡아두면 yield*로 제어 가능:

import {createRef} from '@motion-canvas/core';

const circle = createRef<Circle>();
view.add(<Circle ref={circle} size={100} fill={'#3b82f6'} />);
yield* circle().size(300, 1);

ref 없이도 인덱스/이름으로 접근 가능하지만, ref가 가장 직관적.

🚀 다음 단계

작업	가이드
렌더링 (export)	Motion Canvas 렌더링
에디터 디버깅	Motion Canvas 에디터 워크플로우
Lottie/Rive 통합	Motion Canvas 확장 & 통합

🔗 공식 리소스

Animations 카테고리: https://motioncanvas.io/docs/category/animations/
Scenes: https://motioncanvas.io/docs/scenes
Signals: https://motioncanvas.io/docs/signals
Tweening: https://motioncanvas.io/docs/tweening
Layouts: https://motioncanvas.io/docs/layouts

상위 문서: ← Motion Canvas 사용 가이드 출처: Motion Canvas 공식 문서 — Animations 카테고리 한글화 (2026-07-30) 공급사: Motion Canvas (motion-canvas 조직)

변경 이력

날짜	변경
2026-07-30	초안 작성 — Scene/노드/Signal/Tween/Layout 핵심 API 표