时间轴编辑

Studio 时间轴允许你编辑 HyperFrames 合成中可以干净地持久化回源 HTML 的部分。

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

时间轴可以做什么

• 在时间轴上移动片段——水平拖动片段以更新 data-start
• 在轨道之间移动片段——垂直拖动片段以更新 data-track-index
• 更改视觉堆叠——时间轴顶部行渲染在上方，此排序通过内联 z-index 持久化回 HTML
• 裁剪片段尾部——拖动右手柄以减少 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

这些属性让 Studio 可以说：

在时间轴上稍后开始此片段，同时也稍后开始读取源中的媒体。

通用运动片段目前没有等效的播放偏移模型。对于 GSAP 驱动的 section 或 div，Studio 可以：

• 通过更改 data-start 将整个片段移到后面
• 通过更改 data-duration 缩短其可见窗口

但它还不能说：

从时间轴的中途开始此动画。

这就是为什么通用运动片段不显示交互式左侧裁剪手柄。此控件被隐藏，而不是暗示运行时目前无法真实表示的行为。

ℹ️ Note

一个有用的心智模型是：移动更改片段何时开始，右侧裁剪更改片段何时结束，左侧裁剪仅在片段可以实际跳过自身内容开头时出现。

堆叠规则

Studio 遵循常规时间轴编辑器约定：

• 视觉上在顶部的行渲染在最上方
• 较低的行渲染在下方

如果你想让字幕、底部字幕条或覆盖层位于其他内容上方，请将它们放在视觉上更高的时间轴行上。

当前限制

• 通用运动片段尚无真正的前裁剪。 你可以在时间轴上将这些片段移到后面，但不能从中间开始其内部动画阶段。
• 层仍由行排序加持久化的内联 z-index 驱动。 如果片段在 Studio 流程之外已有自定义 CSS 堆叠规则，手动编辑时请记住这一点。
• 时间轴编辑范围刻意受限。 Studio 目前专注于移动和裁剪行为。尚未暴露完整的分割、滑动、波纹或滚动编辑语义。

最佳实践

• 当你想让元素稍后开始但仍播放完整动画时，使用移动。
• 当你想让元素更早结束时，使用右侧裁剪。
• 当你想移除视频或音频片段的开头时，使用媒体左侧裁剪。
• 将覆盖层和字幕放在视觉上更高的行上，使其渲染在基础素材上方。