모션

트랜지션

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

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

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

트랜지션 작동 방식

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

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

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

타이밍

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

지속 시간
트랜지션이 진행되는 시간(밀리초)입니다.
지연
트랜지션이 시작되기까지 기다리는 시간(밀리초)입니다.
속성별 타이밍
개별 속성의 기본 커브와 타이밍을 재정의합니다 — 예를 들어 불투명도는 이징으로, 위치는 스프링으로 움직이게 할 수 있습니다.

이징

이징은 커브로 모션의 속도감을 만듭니다. SSHOW는 자주 쓰는 프리셋과 커스텀 커브 에디터를 제공합니다.

  • 리니어
  • 이즈 인
  • 이즈 아웃
  • 이즈 인아웃
  • 커스텀 커브

커브 에디터에서는 큐빅 베지에의 두 제어점을 드래그해 원하는 느낌을 정확히 맞추고, 최근에 쓴 커브를 저장해 재사용할 수 있습니다.

스프링

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

강성(Stiffness)
스프링의 세기입니다. 값이 클수록 더 빠르게 튕깁니다.
감쇠(Damping)
움직임이 가라앉는 속도입니다. 값이 작을수록 멈추기 전에 더 많이 튕깁니다.
질량(Mass)
Object의 무게입니다. 무거울수록 느리고 둔하게 느껴집니다.

애니메이션 가능한 속성

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

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

Object 애니메이션 준비 중

준비 중

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

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

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