元素参考

Layout 元素

1. 结构

interface LayoutClip extends BaseClip {
  type: "layout";
  direction?: "horizontal" | "vertical";
  gap?: number;
  padding?: number | [number, number, number, number];
  alignItems?: "start" | "center" | "end" | "stretch";
  justifyContent?:
    | "start"
    | "center"
    | "end"
    | "space-between"
    | "space-around";
  clip?: boolean;
  children: Clip[];
}

2. 当前已实现参数

  • direction
  • gap
  • padding
  • alignItems
  • justifyContent
  • clip
  • children

3. children 当前支持的元素类型

  • video
  • image
  • text
  • rect
  • circle
  • polygon
  • audio
  • layout
  • template

当前不支持直接作为子节点:

  • subtitle

4. 最重要的限制

layout.children 不是独立时间线。

这意味着:

  • 子元素不会各自按 start 调度
  • 子元素不会完整执行自己的 duration
  • 子元素不应该被当成完整时间线 clip 使用
  • animations / keyframes / transition 不应在 children 中按“顶层 clip 规则”理解

更准确地说,layout 是静态编排容器,不是嵌套场景树。

5. 示例

{
  "type": "layout",
  "start": 0,
  "duration": 6,
  "direction": "vertical",
  "gap": 24,
  "padding": 32,
  "transform": {
    "x": "50%",
    "y": "50%",
    "width": "80%",
    "height": "60%"
  },
  "children": [
    {
      "type": "text",
      "start": 0,
      "duration": 6,
      "text": "Title",
      "style": {
        "fontSize": 56,
        "fill": "#ffffff"
      }
    },
    {
      "type": "rect",
      "start": 0,
      "duration": 6,
      "transform": {
        "width": "100%",
        "height": 120
      },
      "style": {
        "fill": "#1f2937",
        "borderRadius": 16
      }
    }
  ]
}