> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperframes-zh.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 时间线编辑

> 您今天可以在 Studio 时间线中编辑哪些内容、这些编辑如何映射回 HTML，以及当前的限制。

Studio 时间轴允许您编辑 HyperFrames 合成的部分，这些部分可以干净地保留回源 HTML。

它不是单独的项目格式或隐藏的二进制状态。每个受支持的时间线操作都会更新您的合成已使用的相同 `data-*` 属性和内联样式。

## 时间线可以做什么

* **及时移动剪辑** — 水平拖动剪辑以更新 `data-start`
* **在行之间移动剪辑** — 垂直拖动剪辑以更新 `data-track-index`
* **更改视觉堆叠** - 顶部时间线行呈现在较低行上方，并且该顺序保留回内联 `z-index`
* **修剪剪辑的末端** — 拖动右侧手柄以缩小 `data-duration`
* **修剪媒体剪辑的开头** — 拖动媒体偏移支持的剪辑上的左手柄，以将剪辑开头和播放偏移一起推进

## 时间轴如何编辑映射到源

时间线直接针对您的 HTML 工作：

* 水平移动更新 `data-start`
* 垂直移动更新 `data-track-index`
* 右装饰更新 `data-duration`
* 媒体左侧修剪更新 `data-start` 和 `data-media-start` 或 `data-playback-start`
* 更改行顺序还会更新内联 `z-index` ，以便预览与时间线匹配

这意味着时间线编辑保持可检查和可版本控制。如果在移动或修剪后打开文件，您可以看到更改的确切属性。

## 当前编辑模型（按剪辑类型）

### 通用运动/DOM 剪辑

示例：

* `div`
* `section`
* `aside`
* GSAP 驱动的卡片、叠加层和文本块

支持：

* 将剪辑在时间轴上移到较晚或较早的位置
* 将剪辑移动到另一行
* 修剪剪辑的末端

尚不支持：

* 真正的前修剪，删除动画本身的开头

### 媒体剪辑

示例：

* `video`
* `audio`
* 由 `data-media-start` / `data-playback-start` 支持的包装器

支持：

* 将剪辑在时间轴上移到较晚或较早的位置
* 将剪辑移动到另一行
* 修剪剪辑的末端
* 修剪媒体内容本身的开头

## 为什么开始修剪仅限媒体

媒体剪辑有一个真实的内容偏移模型：

* `data-media-start`
* `data-playback-start`

这些属性让工作室说：

> 稍后在时间轴上开始此剪辑，并稍后在源内开始读取媒体。

通用运动剪辑还没有等效的播放偏移模型。对于 GSAP 驱动的 `section` 或 `div`，工作室可以：

* 稍后通过更改 `data-start` 移动整个剪辑
* 通过更改 `data-duration` 缩短其可见窗口

但它还不能说：

> 在时间线的中间开始播放该动画。

这就是为什么通用运动剪辑**不**显示交互式左修剪手柄。该控件是隐藏的，而不是暗示运行时当前无法真实表示的行为。

<Note>
  一个有用的思维模型是：**移动**在剪辑开始时发生变化，**右修剪**在其结束时发生变化，而**左修剪**仅在剪辑实际上可以跳过其自身内容的开头时出现。
</Note>

## 堆叠规则

Studio 遵循正常的时间线编辑器约定：

* 视觉上最上面的行呈现在顶部
* 较低的行呈现在下方

如果您希望标题、下三分之一或叠加层位于其他内容之上，请将它们放在视觉上较高的时间轴行上。

## 目前的限制

* **尚无适用于通用运动剪辑的真正前部装饰。**
  您可以稍后移动这些剪辑，但不能中途开始其内部动画阶段。
* **分层仍然由行顺序加上持久内联 `z-index` 驱动。**
  如果剪辑在 Studio 流程之外已具有自定义 CSS 堆叠规则，请在手动编辑时记住这一点。
* **时间轴编辑是有意限定范围的。**
  该工作室目前专注于移动和修剪行为。它尚未公开完整的分割、滑动、滑动、波纹或滚动编辑语义。

## 最佳实践

* 当您希望元素稍后启动但仍播放其完整动画时，请使用 **move**。
* 当您希望元素更快结束时，请使用**右修剪**。
* 当您想要删除视频或音频剪辑的开头时，请使用**媒体左修剪**。
* 将叠加层和标题放在视觉上较高的行上，以便它们呈现在基本素材之上。