트랜지션

트랜지션은 한 트랙에서 두 클립이 겹치는 구간에서 앞 클립을 다음 클립으로 섞어 넘깁니다. 이 페이지에서는 겹침을 설정하는 방법, 엔진이 검사하는 것, 이징과 파라미터의 동작을 다룹니다. 다 읽고 나면 어떤 두 클립이든 내장 트랜지션으로 이을 수 있습니다.

겹치는 구간

한 트랙은 한 번에 클립 하나만 보여 주므로, 한 트랙의 두 클립은 트랜지션이 이어 주는 구간에서만 겹칠 수 있습니다. 클립 a를 클립 b로 이으려면 두 클립을 겹치게 하고, 트랙의 transitions에 ClipTransition을 추가합니다.

{
  "id": "v1",
  "name": "Picture",
  "kind": "video",
  "clips": [
    {
      "id": "a",
      "source_id": "platform",
      "timeline_range": { "start": 0, "end": 300000 },
      "source_range": { "start": 0, "end": 300000 }
    },
    {
      "id": "b",
      "source_id": "coast",
      "timeline_range": { "start": 180000, "end": 480000 },
      "source_range": { "start": 0, "end": 300000 }
    }
  ],
  "transitions": [
    {
      "from_clip": "a",
      "to_clip": "b",
      "timeline_range": { "start": 180000, "end": 300000 },
      "easing": { "type": "cubic_bezier", "x1": 0.42, "y1": 0, "x2": 0.58, "y2": 1 },
      "effect": {
        "id": "alpha2.transition.circle-open",
        "version": 1,
        "params": { "smoothness": { "mode": "constant", "value": { "type": "float", "value": 0.3 } } }
      }
    }
  ]
}

여기서 a는 0초부터 2.5초까지, b는 1.5초부터 4초까지이므로 1.5초부터 2.5초까지 겹치고, 트랜지션의 timeline_range가 바로 그 1초입니다.

**from_clip**은 진행도 0일 때, **to_clip**은 진행도 1일 때 보입니다.
**timeline_range**는 트랜지션이 진행되는 반열린 구간입니다. 이 구간 내내 두 클립이 모두 활성 상태여야 하고, 두 클립이 겹치는 구간 전체를 덮어야 합니다. 그래서 실제로는 겹친 구간과 정확히 같습니다.
**easing**은 진행도의 곡선을 정합니다(아래 참고).
**effect**는 실행할 트랜지션입니다. alpha2.transition.circle-open 버전 1처럼 트랜지션 정의를 가리키는 ClipEffect입니다.

엔진이 검사하는 것

프로젝트를 불러올 때 엔진은 다음을 거부합니다.

한 트랙에서 겹친 구간을 덮는 트랜지션 없이 겹친 클립(clips a and b overlap without a covering transition on track v1)
비디오 트랙이 아닌 트랙의 트랜지션, 클립 자신과의 트랜지션, 빈 구간의 트랜지션, 구간이 두 클립 안에 있지 않은 트랜지션(track v1 has an invalid clip transition)
같은 두 클립 사이의 트랜지션 두 개(방향과 상관없이)
한 시점에 활성인 트랜지션들이 클립에서 클립으로 이어지며 원을 이루는 경우

린터는 어떤 프레임에도 보이지 않는 트랜지션도 경고합니다. 한 프레임보다 짧거나, 한 프레임 길이인데 프레임 그리드에서 벗어난 트랜지션입니다(short_transition).

이징

트랜지션의 선형 진행도는 구간 시작에서 0, 끝에서 1입니다. easing이 이를 이징된 진행도로 바꾸며, 결과는 0..1로 잘립니다.

{ "type": "linear" }: 진행도가 일정한 속도로 증가합니다.
{ "type": "cubic_bezier", "x1": 0.42, "y1": 0, "x2": 0.58, "y2": 1 }: 진행도가 CSS cubic-bezier() 곡선을 따릅니다. 여기서는 ease-in-out입니다.

키프레임 보간과 달리 이징에는 hold가 없습니다.

파라미터

트랜지션 파라미터는 이펙트와 마찬가지로 이름 있는 애니메이션 가능한 값입니다. 타임라인 트랜지션에서 파라미터의 키프레임은 타임라인 시간을 따릅니다. 생략한 파라미터는 기본값을 씁니다.

아래 프리셋은 alpha2.transition.directional-wipe와 alpha2.transition.fade로 사진 세 장을 잇습니다.

익스플로러에서 내장 트랜지션을 골라 파라미터를 확인해 보세요.

모든 파라미터의 범위와 기본값을 포함한 전체 목록은 트랜지션 레퍼런스에 있습니다.

다음 단계

트랜지션 레퍼런스모든 내장 트랜지션과 파라미터.

이펙트와 컴포지션이펙트 호출과 컴포지션 그래프.

시간과 틱반열린 구간과 프레임 그리드.