# 基础概念

## 1. 顶层模型

当前协议是：

```json
{
  "meta": {},
  "assets": {},
  "tracks": []
}
```

要点：
- `meta` 描述输出画布
- `assets` 是可选素材池
- `tracks[].clips` 才是真正的时间线内容

## 2. 时长模型

v2 不再要求顶层 `video.duration`。

当前项目里的真实行为：
- 总时长从顶层 clips 推导
- 项目结束时间取所有 clip 实际结束时间的最大值
- `video` 和 `audio` 如果做了源裁剪，实际可播放时长会变短

## 3. Track 与 clip

每个 track 本质上就是一个 clip 容器：

```json
{
  "id": "main",
  "clips": [
    {
      "type": "text",
      "start": 0,
      "duration": 3
    }
  ]
}
```

每个 clip 负责定义：
- 它是什么元素
- 什么时候开始
- 持续多久
- 出现在什么位置
- 以什么样式显示

## 4. 坐标模型

百分比坐标不是 DOM 那种左上角原点，而是基于中心点。

例如：
- `x: "50%"` 表示水平居中
- `y: "50%"` 表示垂直居中
- `x: "0%"` 表示最左侧
- `y: "100%"` 表示底部

## 5. 素材引用

需要复用媒体资源时，先放进 `assets`，再用 `$ref`：

```json
{
  "assets": {
    "images": [
      {
        "id": "cover",
        "src": "https://example.com/cover.jpg"
      }
    ]
  }
}
```

然后这样引用：

```json
{
  "type": "image",
  "start": 0,
  "duration": 5,
  "src": { "$ref": "cover" }
}
```

## 6. 下一步看什么

- 想按元素查细节：看 [元素文档目录](https://renderingvideo.com/docs/elements.md)
- 想走一个完整实战：看 [创建产品展示视频](https://renderingvideo.com/docs/tutorials/create-product-showcase.md)
- 想专门看动画：看 [使用动画](https://renderingvideo.com/docs/tutorials/use-animations.md)