Overview

Element

Effect

关键帧

关键帧定义了在特定时间的特定属性值，并在它们之间进行插值以创建平滑的动画。

属性类型必需示例值范围描述
idstringtrue--关键帧的唯一标识符。
timenumbertrue--关键帧发生的时间，以秒为单位（相对于元素开始时间）。
stateObjobjecttrue--包含此关键帧属性值的状态对象。可以包括任何可动画属性，如 x、y、rotation、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 空间中插值。