Overview

ทรัพย์สิน	ประเภท	จำเป็น	ตัวอย่าง	ช่วงค่า	คำอธิบาย
id	string	true	-	-	รหัสประจำตัวเฉพาะของคีย์เฟรม
time	number	true	-	-	เวลาที่คีย์เฟรมเกิดขึ้น เป็นวินาที (สัมพันธ์กับเวลาเริ่มต้นขององค์ประกอบ)
stateObj	object	true	-	-	อ็อบเจ็กต์สถานะที่มีค่าคุณสมบัติในคีย์เฟรมนี้ สามารถรวมคุณสมัติที่สามารถทำให้เคลื่อนไหวได้ เช่น x, y, rotation, scaleX, scaleY, alpha, ฯลฯ
cp1	object	false	-	-	จุดควบคุมแรกสำหรับการทำให้ราบเรียบด้วยเส้นโค้งเบเซียร์ พิกัดถูกทำให้เป็นมาตรฐาน (ช่วง 0-1) ตัวอย่าง: {x: 0.25, y: 0.1}
cp2	object	false	-	-	จุดควบคุมที่สองสำหรับการทำให้ราบเรียบด้วยเส้นโค้งเบเซียร์ พิกัดถูกทำให้เป็นมาตรฐาน (ช่วง 0-1) ตัวอย่าง: {x: 0.25, y: 1}

จุดควบคุมการเบเซียร์

คุณสมบัติ cp1 และ cp2 กำหนดเส้นโค้งเบเซียร์ลูกบาศก์สำหรับการทำให้ราบเรียบแบบกำหนดเองระหว่างคีย์เฟรม:

ค่าเริ่มต้น (เชิงเส้น): หากไม่ระบุ จะใช้การทำให้ราบเรียบแบบเชิงเส้น
ช่วงพิกัด: ค่าทั้ง x และ y ควรอยู่ระหว่าง 0 และ 1
การกำหนดเส้นโค้ง: สร้างเส้นโค้งเบเซียร์ลูกบาศก์จาก (0,0) ผ่าน cp1 และ cp2 ไปยัง (1,1)
พรีเซ็ตทั่วไป:
- 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"
}

ลำดับความสำคัญของการเคลื่อนไหว

เมื่อองค์ประกอบมีวิธีการเคลื่อนไหวหลายวิธีที่ใช้:

คีย์เฟรม (กำหนดในอาร์เรย์ keyframes) - การเคลื่อนไหวของคุณสมบัติมาตรฐาน
การเคลื่อนไหวของโหนด (ในอาร์เรย์ animations) - การเคลื่อนไหวขั้นสูงเช่นนิพจน์, เส้นทาง, ลำดับ
การเคลื่อนไหวเชิงพาณิชย์ - การเคลื่อนไหวแบบโปรแกรม

หากคุณสมบัติเดียวกันถูกทำให้เคลื่อนไหวโดยวิธีหลายวิธี ลำดับความสำคัญจะเป็น:

สูงสุด: การเคลื่อนไหวของโหนด (นิพจน์, เชิงพาณิชย์, เส้นทาง, ลำดับ)
ปานกลาง: การเคลื่อนไหวของคีย์เฟรม
ต่ำสุด: ค่าคุณสมัติคงที่

สิ่งนี้ช่วยให้การเคลื่อนไหวขั้นสูงสามารถแทนที่ค่าคีย์เฟรมเมื่อจำเป็น

หมายเหตุที่สำคัญ

การอ้างอิงเวลา: ค่าคีย์เฟรม time เป็นสัมพัทธ์ต่อเวลา start ขององค์ประกอบ ไม่ใช่เวลาบนไทม์ไลน์ที่แน่นอน
หลายคุณสมบัติ: คีย์เฟรมเดียวสามารถทำให้เคลื่อนไหวคุณสมบัติหลายอย่างพร้อมกันโดยการรวมไว้ใน stateObj
การสร้างความต่อเนื่อง: คุณสมบัติระหว่างคีย์เฟรมจะถูกสร้างความต่อเนื่องโดยอัตโนมัติ เส้นโค้งการสร้างความต่อเนื่องถูกกำหนดโดยจุดควบคุมเบเซียร์ cp1 และ cp2
คีย์เฟรมแรก: หากคีย์เฟรมแรกไม่ได้อยู่ที่เวลา 0 องค์ประกอบจะทำการสร้างความต่อเนื่องจากสถานะเริ่มต้นไปยังคีย์เฟรมแรก
การสร้างความต่อเนื่องของสี: คุณสมบัติสี (เช่น fill, stroke) จะถูกสร้างความต่อเนื่องในพื้นที่ RGB