时间线编辑

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 缩短其可见窗口

但它还不能说：

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

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

​

堆叠规则

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

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

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

​

目前的限制

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

​

最佳实践

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