跳到主要内容

组件

组件是可复用的画板。创建一次组件,然后在整个 Rive 文件中使用经过自定义的实例。对源组件所做的更改会反映到其所有实例中。

你可以通过多种方式使用组件:

组件可以包含自己的图形、动画、状态机和数据,让你能用更小的可复用片段构建复杂体验。

创建组件

将画板转换为组件

任何画板都可以转换为可复用组件。

  1. 选择一个画板。
  2. 在检查器中选择 组件(Component) 图标,或按 Shift + N

你可以通过舞台上紫色的画板标题来识别组件。

将画板转换为组件

未标记为组件的画板不会随 Rive 文件一起导出。这对于仅在制作阶段使用的画板(例如测试或参考画板)很有用。

将对象转换为组件

你可以选择画板上的一个或多个对象,并将它们转换为新组件。

  1. 选择要转换的一个或多个对象。
  2. 右键单击选区,然后选择 创建组件(Create Component)

Rive 会创建一个包含所选对象的新组件,并用该组件的实例替换原来的选区。

从画板内的元素创建新组件

动画和状态机

如果所选对象由原画板上的时间轴驱动动画,相关关键帧会从该时间轴中移除,并复制到组件内的新时间轴上。

状态机不会复制到新组件中。状态机可能依赖于选区之外的对象、动画、数据和其他元素,因此你需要在组件内创建新的状态机。

数据绑定会被复制到新组件中,但它们的视图模型不会。

故障排除

组件是自包含的,因此如果选区依赖于其外部的对象,Rive 无法创建组件。请确保在选区中包含所有必需的依赖。

例如,跨越新组件边界的绘制顺序依赖会阻止创建组件,并显示 "Can't create component" 错误:"These dependencies point across the new component's boundary and would break."

因依赖跨越组件边界而无法创建组件的错误

放置组件

使用 组件工具(Component Tool)(原嵌套画板工具)在舞台上放置组件实例。从工具栏中选择该工具,或按 N

单击舞台上的任意位置,从可用组件中选择并在该位置放置一个实例。

使用组件工具单击舞台并从可用组件菜单中选择以放置组件实例

如果某个画板没有出现在组件菜单中,请确认你已将其转换为组件

也可以使用 组件工具 旁边的下拉菜单,在放置前先选择组件。

单击组件工具下拉菜单、选择组件再单击舞台以放置组件实例

组件菜单遵循资源面板使用的排序模式:

  • 自定义(Custom) 按资源面板中的组织方式显示组件。
  • 源/类型(Source/Type) 按来源对组件分组。这在使用库(Libraries)时特别有用。

按自定义排序资源

编辑组件

双击组件实例以打开其源组件。你对源组件所做的更改会反映到其所有实例中,而在各个实例上配置的属性保持不变。

双击以编辑组件

组件实例属性

选择一个组件实例,即可在检查器中配置其属性。这些属性控制该特定实例的数据、动画、源、布局和其他行为,而不会更改源组件。

侧边栏中的组件属性

你无法直接更改组件实例的原点(origin)。若要使用不同的原点,请将组件实例放入一个组中,然后调整该组的原点。

源(Source)

源(Source) 决定实例显示哪个组件。可以直接选择组件,也可以对源进行数据绑定,从而动态更换组件。

了解更多:数据绑定

数据(Data)

配置组件实例使用的数据。

有状态组件(Stateful Components)

如果该组件是有状态组件,你可以在组件实例上直接设置其暴露的属性。

模型(Model)

使用 模型(Model) 设置组件使用的视图模型实例。

  • 继承(Inherit) 使用来自最近父级的兼容视图模型实例。
  • 若要指定实例,请向父级的视图模型添加 视图模型(View Model) 属性并为其分配一个实例。然后可以将该属性选为组件的 模型(Model)

了解更多:视图模型和实例

模式(Mode)

模式(Mode) 决定组件实例如何根据父级提供的可用空间调整尺寸并作出响应。有关尺寸模式及其属性的更多信息,请参阅组件尺寸

动画(Animations)

选择在组件实例上播放的动画。大多数情况下你会选择状态机,但也可以添加一个或多个时间轴动画。

状态机(State Machine)

选择要在组件实例上运行的状态机。你可以调整其播放 速度(Speed) 并启用 量化(Quantize)

时间轴动画(Timeline Animations)

添加时间轴动画,使其单独播放、与状态机一起播放,或与其他动画叠加。添加时间轴动画时,可在 简单(Simple)重映射(Remap) 之间选择。

简单(Simple) 按正常方式播放时间轴,并提供以下控件:

  • 混合(Mix) 控制该动画与其他动画混合时的贡献程度。
  • 速度(Speed) 控制动画的播放速度。
  • 播放(Playing) 控制动画是否正在播放。

重映射(Remap) 让你直接控制动画播放头的位置:

  • 混合(Mix) 控制该动画与其他动画混合时的贡献程度。
  • 时间(Time) 以百分比控制动画播放头,其中 0% 为起点,100% 为终点。
看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群