Overview

Element

Effect

키프레임

키프레임은 특정 시간에 특정 속성 값을 정의하고, 그 사이를 보간하여 부드러운 애니메이션을 생성합니다.

소품유형필수예시값 범위설명
idstringtrue--키프레임의 고유 식별자입니다.
timenumbertrue--키프레임이 발생하는 시간(요소 시작 시간에 대한 상대적 초 단위)입니다.
stateObjobjecttrue--이 키프레임에서 속성 값을 포함하는 상태 객체입니다. x, y, 회전, scaleX, scaleY, alpha 등과 같은 애니메이션 가능한 속성을 포함할 수 있습니다.
cp1objectfalse--베지어 곡선 이징을 위한 첫 번째 제어점입니다. 좌표는 정규화되어 있습니다(0-1 범위). 예: {x: 0.25, y: 0.1}
cp2objectfalse--베지어 곡선 이징을 위한 두 번째 제어점입니다. 좌표는 정규화되어 있습니다(0-1 범위). 예: {x: 0.25, y: 1}

베지어 이징 제어점

cp1 및 cp2 속성은 키프레임 간의 사용자 정의 이징을 위한 3차 베지어 곡선을 정의합니다:

  • 기본값(선형): 생략할 경우 선형 보간이 사용됩니다.
  • 좌표 범위: x와 y 값은 모두 0과 1 사이여야 합니다.
  • 곡선 정의: (0,0)에서 cp1과 cp2를 통해 (1,1)로 가는 3차 베지어를 형성합니다.
  • 일반적인 프리셋:
    • Ease-in-out: cp1: {x: 0.42, y: 0}, cp2: {x: 0.58, y: 1}
    • Ease-in: cp1: {x: 0.42, y: 0}, cp2: {x: 1, y: 1}
    • Ease-out: cp1: {x: 0, y: 0}, cp2: {x: 0.58, y: 1}
imageElement.json
{
  "id": "39ecb75a-3490-43bd-84c2-72366c2f39f2",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 0,
  "y": 0,
  "blendMode": "normal",
  "anchorX": 1302,
  "anchorY": 2312,
  "rotation": 0,
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [
      {
          "id": "800350bd-4a24-4440-904c-ec08a8159508",
          "time": 0,
          "stateObj": {
              "alpha": 0
          },
          "cp1": {
              "x": 0.25,
              "y": 0.1
          },
          "cp2": {
              "x": 0.25,
              "y": 1
          }
      },
      {
          "id": "ce3f9b10-2b9e-4266-8cdb-77167f9f16aa",
          "time": 3,
          "stateObj": {
              "alpha": 1
          },
          "cp1": {
              "x": 0.25,
              "y": 0
          },
          "cp2": {
              "x": 0.25,
              "y": 0.9
          }
      }
  ],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

애니메이션 우선순위

하나의 요소에 여러 애니메이션 방법이 적용된 경우:

  1. 키프레임 (keyframes 배열에 정의됨) - 표준 속성 애니메이션
  2. 노드 애니메이션 (animations 배열에 포함) - 표현식, 경로, 시퀀스와 같은 고급 애니메이션
  3. 절차적 애니메이션 - 프로그래밍 애니메이션

같은 속성이 여러 방법으로 애니메이션될 경우, 우선순위는 다음과 같습니다:

  • 가장 높음: 노드 애니메이션 (표현식, 절차적, 경로, 시퀀스)
  • 중간: 키프레임 애니메이션
  • 가장 낮음: 정적 속성 값

이로 인해 필요할 때 고급 애니메이션이 키프레임 값을 덮어쓸 수 있습니다.

중요 사항

  • 시간 참조: 키프레임 time 값은 요소의 start 시간에 대한 상대적인 시간이며, 절대 타임라인 시간은 아닙니다.
  • 다중 속성: 하나의 키프레임은 stateObj에 포함하여 여러 속성을 동시에 애니메이션할 수 있습니다.
  • 보간: 키프레임 간의 속성은 자동으로 보간됩니다. 보간 곡선은 cp1 및 cp2 베지어 제어점에 의해 정의됩니다.
  • 첫 번째 키프레임: 첫 번째 키프레임이 시간 0에 위치하지 않으면, 요소는 초기 상태에서 첫 번째 키프레임으로 보간됩니다.
  • 색상 보간: 색상 속성(fill, stroke와 같은)은 RGB 공간에서 보간됩니다.