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 屬性定義了一個立方貝茲曲線，用於關鍵幀之間的自定義緩動：

  • 默認（線性）：如果省略，則使用線性插值
  • 坐標範圍：x 和 y 值應介於 0 和 1 之間
  • 曲線定義：從 (0,0) 通過 cp1 和 cp2 到 (1,1) 形成一個立方貝茲曲線
  • 常見預設：
    • 緩入緩出：cp1: {x: 0.42, y: 0}, cp2: {x: 0.58, y: 1}
    • 緩入：cp1: {x: 0.42, y: 0}, cp2: {x: 1, y: 1}
    • 緩出：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 空間中進行插值。