Overview

Element

Effect

Keyframe

Các keyframe định nghĩa các giá trị thuộc tính cụ thể tại các thời điểm cụ thể, với sự nội suy giữa chúng để tạo ra các hoạt ảnh mượt mà.

Thuộc tínhLoạiBắt buộcVí dụPhạm vi giá trịMô tả
idstringtrue--Định danh duy nhất của keyframe.
timenumbertrue--Thời gian mà keyframe xảy ra, tính bằng giây (tương đối với thời gian bắt đầu của phần tử).
stateObjobjecttrue--Đối tượng trạng thái chứa các giá trị thuộc tính tại keyframe này. Có thể bao gồm bất kỳ thuộc tính nào có thể hoạt hình như x, y, rotation, scaleX, scaleY, alpha, v.v.
cp1objectfalse--Điểm kiểm soát đầu tiên cho việc easing đường cong Bezier. Các tọa độ được chuẩn hóa (phạm vi 0-1). Ví dụ: {x: 0.25, y: 0.1}
cp2objectfalse--Điểm kiểm soát thứ hai cho việc easing đường cong Bezier. Các tọa độ được chuẩn hóa (phạm vi 0-1). Ví dụ: {x: 0.25, y: 1}

Điểm kiểm soát Easing Bezier

Các thuộc tính cp1 và cp2 định nghĩa một đường cong Bezier bậc ba cho việc easing tùy chỉnh giữa các keyframe:

  • Mặc định (tuyến tính): Nếu bị bỏ qua, nội suy tuyến tính sẽ được sử dụng
  • Phạm vi tọa độ: Cả giá trị x và y nên nằm trong khoảng từ 0 đến 1
  • Định nghĩa đường cong: Tạo thành một đường cong Bezier bậc ba từ (0,0) qua cp1 và cp2 đến (1,1)
  • Cài sẵn phổ biến:
    • 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"
}

Ưu tiên Hoạt Hình

Khi một phần tử có nhiều phương pháp hoạt hình được áp dụng:

  1. Keyframes (được định nghĩa trong mảng keyframes) - hoạt hình thuộc tính chuẩn
  2. Hoạt hình Node (trong mảng animations) - hoạt hình nâng cao như biểu thức, đường dẫn, chuỗi
  3. Hoạt hình Quy trình - hoạt hình lập trình

Nếu cùng một thuộc tính được hoạt hình bởi nhiều phương pháp, thứ tự ưu tiên là:

  • Cao nhất: Hoạt hình node (biểu thức, quy trình, đường dẫn, chuỗi)
  • Trung bình: Hoạt hình keyframe
  • Thấp nhất: Giá trị thuộc tính tĩnh

Điều này cho phép các hoạt hình nâng cao ghi đè các giá trị keyframe khi cần thiết.

Lưu Ý Quan Trọng

  • Tham chiếu Thời gian: Giá trị time của keyframe là tương đối với thời gian start của phần tử, không phải thời gian tuyệt đối trên dòng thời gian.
  • Nhiều Thuộc Tính: Một keyframe duy nhất có thể hoạt hình nhiều thuộc tính cùng một lúc bằng cách bao gồm chúng trong stateObj.
  • Nội Suy: Các thuộc tính giữa các keyframe sẽ tự động được nội suy. Đường cong nội suy được định nghĩa bởi các điểm kiểm soát Bezier cp1 và cp2.
  • Keyframe đầu tiên: Nếu keyframe đầu tiên không ở thời gian 0, phần tử sẽ nội suy từ trạng thái ban đầu của nó đến keyframe đầu tiên.
  • Nội Suy Màu: Các thuộc tính màu (như fill, stroke) được nội suy trong không gian RGB.