组件
组件是可复用的画板。创建一次组件,然后在整个 Rive 文件中使用经过自定义的实例。对源组件所做的更改会反映到其所有实例中。
你可以通过多种方式使用组件:
组件可以包含自己的图形、动画、状态机和数据,让你能用更小的可复用片段构建复杂体验。
创建组件
将画板转换为组件
任何画板都可以转换为可复用组件。
- 选择一个画板。
- 在检查器中选择 组件(Component) 图标,或按
Shift+N。
你可以通过舞台上紫色的画板标题来识别组件。

未标记为组件的画板不会随 Rive 文件一起导出。这对于仅在制作阶段使用的画板(例如测试或参考画板)很有用。
将对象转换为组件
你可以选择画板上的一个或多个对象,并将它们转换为新组件。
- 选择要转换的一个或多个对象。
- 右键单击选区,然后选择 创建组件(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%为终点。