전환 요소

전환은 두 개의 연속적인 비디오 또는 이미지 요소 간에 부드러운 시각 효과를 생성합니다.

시간 제약

  • 필수 겹침: 전환은 하나의 요소(preNodeId)의 끝과 다른 요소(postNodeId)의 시작을 겹침으로써 작동합니다.
  • 최대 지속 시간: 전환 지속 시간은 두 요소 간의 사용 가능한 겹침 시간을 초과할 수 없습니다.
  • 위치 지정: 전환의 start 시간은 겹침 기간과 일치해야 합니다.

전환 지속 시간 제한

전환의 최대 지속 시간은 다음에 의해 결정됩니다:

maxDuration = min(
  availableEndTime_of_preNode,
  availableStartTime_of_postNode
)

이보다 긴 지속 시간을 설정하면 전환이 올바르게 렌더링되지 않을 수 있습니다.

소품유형필수예시값 범위설명
preNodeIdstringtrue--전환이 시작되는 이전 요소의 고유 식별자입니다.
postNodeIdstringtrue--전환이 끝나는 다음 요소의 고유 식별자입니다.
transitionTypestringtrue-directionalwarp, directionalwipe, Bounce, BowTieHorizontal, BowTieVertical, ButterflyWaveScrawler, CircleCrop, ColourDistance, CrazyParametricFun, Directional, DoomScreenTransition, Dreamy, DreamyZoom, GridFlip, InvertedPageCurl, LinearBlur, Mosaic, PolkaDotsCurtain, Radial, SimpleZoom, StereoViewer, Swirl, WaterDrop, ZoomInCircles, angular, burn, cannabisleaf, circle, colorphase, crosshatch, crosswarp, cube, displacement, doorway, fade, fadecolor, fadegrayscale, flyeye, heart, hexagonalize, kaleidoscope, luma, luminance_melt, morph, multiply_blend, pinwheel, pixelize, polar_function, ripple, rotate_scale_fade, squareswire, squeeze, swap, undulatingBurnOut, wind, windowblinds, windowslice, wipeDown, wipeLeft, wipeRight, wipeUp적용된 전환 효과의 유형입니다. 이름은 대소문자를 구분합니다.

중요한 참고 사항:

  • preNodeIdpostNodeIdview 배열의 기존 요소를 참조해야 합니다.
  • 대소문자 구분: 전환 유형 이름은 대소문자를 구분합니다. 위에 나열된 정확한 이름을 사용하세요.
  • 명명 규칙: 일부 전환은 PascalCase(예: Bounce, CircleCrop)를 사용하고, 다른 전환은 소문자(예: fade, wipeLeft)를 사용합니다. 표시된 정확한 이름을 사용하세요.
  • 지속 시간 제한: 전환 지속 시간이 요소 간의 겹침 시간을 초과하지 않도록 하세요.
  • 전환 요소 자체에는 trackIndex가 필요하지 않습니다 - 참조된 요소에서 타이밍을 유도합니다.

예시 사용 사례:

  • fade 전환은 두 비디오 간의 고전적인 크로스 디졸브를 제공합니다.
  • wipeLeft는 오른쪽에서 왼쪽으로 미끄러지는 효과를 생성합니다.
  • Bounce는 전환 중에 장난스럽고 탄력적인 튕김을 추가합니다.
  • directionalwarp와 같은 사용자 정의 전환은 왜곡 효과를 생성합니다.

예시: 비디오 전환

2초 전환이 겹치는 두 개의 비디오:

transitionElement.json
{
"view": [
  {
    "id": "435862f1-2358-464d-b379-26f4b63b12e3",
    "type": "Video",
    "start": 0,
    "duration": 10.218542,
    "trackIndex": 0,
    "externalUrl": "https://example.com/video1.mp4",
    "ext": "mp4"
  },
  {
    "id": "2b82ffe3-7c6e-4d28-9c11-9e3de94c5a49",
    "type": "Video",
    "start": 8.218542,
    "duration": 15,
    "trackIndex": 0,
    "externalUrl": "https://example.com/video2.mp4",
    "ext": "mp4"
  }
],
"transition": [
  {
    "id": "52b20852-e260-41aa-afab-70c22e20f62b",
    "type": "Transition",
    "start": 8.218542,
    "duration": 2,
    "preNodeId": "435862f1-2358-464d-b379-26f4b63b12e3",
    "postNodeId": "2b82ffe3-7c6e-4d28-9c11-9e3de94c5a49",
    "transitionType": "directionalwarp"
  }
]
}