跳到主要内容

时间轴概览

Resprite 提供与 Aseprite 相近的完整时间轴,可集中管理图层、帧、单元格和动画片段。本页先帮助你理解时间轴的基本布局,再介绍不同平台上的常用入口与设置。

认识时间轴的基本区域

时间轴通常由这几部分组成:

  • 左侧或上方的图层头,用来管理图层名称、可见性和分组。
  • 上方的帧头,用来浏览和选择当前帧。
  • 中间的单元格区域,用来查看每一层在各帧上的内容。
  • 有动画片段时,还会出现片段行,方便整理播放范围。

如果你是第一次接触 Resprite,建议先把这几个区域认熟,再继续阅读图层、帧和单元格的详细页面。

时间轴布局与面板尺寸

iOS 版可以在编辑器中打开 菜单 ▸ 视图 ▸ 时间轴显示位置,把时间轴放到左侧、右侧或底部。

/new-medias/animation/animation-timeline-ios-position-menu.jpeg
iOS 版时间轴位置菜单

桌面端则把时间轴作为独立窗口使用。你可以直接调整窗口尺寸,让它在更紧凑的概览模式和更宽松的编辑模式之间切换。

/new-medias/animation/animation-timeline-desktop-overview.png
桌面端时间轴窗口总览

调整图层头宽度

无论是 iOS 还是桌面端,都可以拖动图层名称区域右侧的分隔把手,调整图层头的宽度。图层较多、名称较长,或者需要更清楚地看到缩略图时,这个操作会很有用。

/new-medias/animation/animation-timeline-layer-header-width.gif
拖动图层头宽度

图层缩略图

打开图层缩略图后,可以更直观地识别每个图层的大致内容。

  • iOS 可在视图菜单或相关设置里快速切换图层缩略图显示。
  • 桌面端可在时间轴设置中开启或关闭图层缩略图。
/versions/r51/layer_thumbnails.png
时间轴中的图层缩略图

时间轴动作栏

时间轴上方的动作栏通常会放一些高频按钮,例如:

  • 播放、暂停,以及跳到上一帧或下一帧。
  • 新建图层、新建帧。
  • 洋葱皮切换。

iOS 版可以在动作栏设置里决定是否显示整个时间轴动作栏,也可以进一步挑选要放哪些按钮。

桌面端的时间轴动作栏更轻量,主要围绕播放、新建图层、新建帧和洋葱皮展开;当时间轴窗口高度过小的时候,动作栏也可能自动不显示,以优先保证表格区域的可用空间。

/new-medias/animation/animation-timeline-desktop-action-bar-settings.png
桌面端时间轴动作栏设置

播放行为设置

如果你经常一边绘制一边检查动画效果,时间轴里的播放行为设置会很有用。当前版本支持这些常见选项:

  • 从头开始播放
  • 跨片段连续播放
  • 播放有限次数后自动停止
  • 停止时恢复到原来选中的帧

这些设置适合用来反复检查短动画片段,而不用每次手动回到原帧继续画。

/new-medias/animation/animation-timeline-playback-settings.png
时间轴播放行为设置

移动端的导航帧手势

在移动端启用单指导航帧模式后,可以直接在画布上完成一些时间轴相关操作,不必频繁点回时间轴。

通常的使用方式是:

  • 左右拖动以切换上一帧或下一帧。
  • 上下拖动以切换洋葱皮。
  • 可选开启双击切换播放。

这套手势更适合平板工作流;桌面端不适用,iPhone 上也不会显示同样的单指绘图模式设置。

/doc-imgs/timeline-gesture.jpeg
移动端的单指导航帧手势

继续阅读: