모션

트랜지션

SSHOW의 모션은 트랜지션을 기반으로 합니다. 두 Scene 사이를 애니메이션하면 엔진이 그 사이를 알아서 채워 줍니다.

모든 속성을 손으로 키프레임하는 대신, 시작 Scene과 끝 Scene을 디자인합니다. SSHOW가 둘을 비교해 위치, 크기, 색, 불투명도 등의 차이를 부드러운 트랜지션으로 애니메이션합니다.

둥근 카드가 완만한 호를 그리며 여섯 프레임으로 캔버스를 가로지르고, 색이 보라에서 청록으로 변하며 맨 앞 프레임이 빛나는 모습 — 하나의 오브젝트가 두 상태 사이를 모핑하는 잔상(어니언 스킨).
트랜지션은 결국 두 상태와 그 사이입니다. SSHOW가 시작 Scene에서 끝 Scene까지 위치·크기·색을 하나의 매끄러운 모션으로 보간합니다.

참고 이 가이드는 현재 Scene 트랜지션을 다룹니다. Object 단위 타임라인과 키프레임은 로드맵에 있으며, 출시되면 별도 섹션으로 안내합니다.

트랜지션 작동 방식

한 Scene에서 다음 Scene으로 넘어가면 엔진이 Object를 짝지어 변화를 애니메이션합니다. 규칙은 단순하고 예측 가능합니다.

  • 두 Scene에서 같은 이름을 가진 Object는 한 상태에서 다른 상태로 부드럽게 변형됩니다.
  • 새 Scene에만 있는 Object는 서서히 나타나고, 사라진 Object는 서서히 사라집니다.
  • Scene 배경색은 두 Scene 사이에서 크로스페이드됩니다.

짝지을 Object는 두 Scene에서 같은 이름을 주면 변형됩니다. 이름을 바꾸면 짝이 풀려 깔끔한 페이드로 처리됩니다.

타이밍

모든 트랜지션은 지속 시간과 선택적 지연으로 제어되며, 속성별로 타이밍을 세밀하게 조정할 수 있습니다.

지속 시간
트랜지션이 진행되는 시간(밀리초)입니다.
지연
트랜지션이 시작되기까지 기다리는 시간(밀리초)입니다.
속성별 타이밍
기본적으로 모든 속성은 Scene의 트랜지션을 따릅니다(패널에 'Scene에서 상속'으로 표시). Override를 누르면 한 속성에 자체 커브와 타이밍을 줄 수 있습니다 — 불투명도는 이징으로, 위치는 스프링으로 — X나 너비 같은 한 축까지 따로 지정할 수 있습니다.

이징

이징은 커브로 모션의 속도감을 만듭니다. Editor 탭의 타입 토글로 모션 종류를 고릅니다 — None·Easing·Spring — 그중 Easing은 커스텀 큐빅 베지어 커브를 제공합니다.

None은 해당 속성의 애니메이션을 끕니다 — 사이 단계 없이 새 상태로 즉시 전환됩니다. 그 사이를 다듬는 두 가지 방법이 Easing과 Spring입니다.

큐빅 베지어의 두 제어점을 끌어 원하는 느낌을 정확히 맞춥니다. Preview는 확정 전에 선택한 Object에서 커브를 미리 재생해 보여주고, Apply로 적용합니다 — 최근에 쓴 커브는 저장돼 재사용할 수 있습니다.

Motion 패널의 Easing 에디터 — 드래그 가능한 두 제어점이 있는 큐빅 베지어 곡선, x1/y1/x2/y2 입력, 지속·지연, 미리보기·적용 버튼.
이징 에디터 — 두 제어점을 드래그해 곡선을 만들거나 정확한 베지어 값을 입력합니다. 우측 상단 복사·붙여넣기 버튼으로 트윈을 재사용합니다.

모션 템플릿

Templates 탭으로 전환하면 느낌별로 묶인 이름 붙은 프리셋을 검색할 수 있는 라이브러리가 열립니다 — 커브를 그리지 않고도 원하는 모션을 바로 고를 수 있습니다:

  • Basic
  • Smooth
  • Expressive
  • Snappy
  • Bouncy

자주 쓰는 트윈은 Recent에 모이며, 우클릭하면 즐겨찾기로 고정할 수 있습니다.

스프링

물리적인 움직임을 원하시나요? 스프링은 커브 대신 자연스럽게 안정되는 시뮬레이션 스프링을 사용합니다. 세 가지 파라미터로 조절합니다.

Spring 탭의 Motion 패널 — 스프링 반응 곡선과 Stiffness(180)·Damping(14)·Mass(1) 슬라이더, Preview·Apply.
스프링 모션은 세 값으로 정해집니다 — 강성·감쇠·질량. 곡선이 오버슈트와 정착을 미리 보여줍니다.
강성(Stiffness)
스프링의 세기입니다. 값이 클수록 더 빠르게 튕깁니다.
감쇠(Damping)
움직임이 가라앉는 속도입니다. 값이 작을수록 멈추기 전에 더 많이 튕깁니다.
질량(Mass)
Object의 무게입니다. 무거울수록 느리고 둔하게 느껴집니다.

패널에서 값을 맞춘 뒤 Preview를 누르면 확정 전에 트랜지션을 양방향으로 재생해 봅니다 — Apply로 확정하거나 Revert로 되돌립니다.

트랜지션 재사용

마음에 드는 이징 곡선이나 스프링을 맞추셨나요? Motion 패널의 복사·붙여넣기 버튼이 현재 트윈을 집어, 다른 Object나 Scene의 같은 속성에 그대로 적용합니다 — 한 번 다듬은 느낌을 스토리 전체에 옮길 수 있습니다.

붙여넣기는 편집 중인 속성을 대상으로 하므로, 불투명도에서 다듬은 트윈을 여러 선택 Object의 불투명도에 한꺼번에 재사용할 수 있습니다.

애니메이션 가능한 속성

트랜지션은 Scene 사이에서 Object의 거의 모든 시각 속성을 움직일 수 있습니다.

  • 위치
  • 크기 비율
  • 회전
  • 기울이기
  • 크기
  • 불투명도
  • 채우기 & 효과

Object 애니메이션 준비 중

준비 중

Object 애니메이션은 곧 추가됩니다. 현재 모션은 Scene 간 트랜지션으로 동작하며, Object 단위 타임라인과 키프레임은 개발 중입니다.

트랜지션은 두 Scene 사이를 애니메이션하며 대부분의 모션을 처리합니다. Object 애니메이션은 여기에 진짜 타임라인을 더해 — Scene 변화와 무관하게 하나의 Object에서 개별 속성을 키프레임으로 다룰 수 있게 합니다 — 프레임 단위의 세밀한 제어가 필요한 순간을 위한 기능입니다.

타임라인 Object별 트랙에 키프레임을 직접 놓고 타이밍을 잡으며, 영상 편집기처럼 재생을 스크럽합니다.
키프레임 특정 시점에 속성 값을 고정하면 SSHOW가 그 사이의 프레임을 보간합니다.
키프레임별 이징 트랜지션에서 쓰던 이징과 스프링 커브를 각 키프레임 구간에 그대로 적용합니다.