跳到主要内容
中文系列课

组件（原嵌套画板）

创建组件​

任何画板都可以转换为组件。要执行此操作，请在舞台上选择一个画板，然后使用检查器中的组件图标来切换其状态。

或者，您可以在选中画板的情况下使用 Shift + N 快捷键。如果您是从 Figma 迁移而来，也可以使用 Cmd/Ctrl + Alt/Option + K 快捷键。

再次选择检查器中的组件切换开关可将您的选择恢复为普通画板，或使用 Shift + Alt/Option + N 快捷键。

目前，只有标记为组件的画板才会被导出到您的 .riv 文件中。如果您认为可能需要在运行时以编程方式访问某个画板，则应将其标记为组件。有关特定导出行为的更多选项即将推出。

使用组件​

使用组件工具（原嵌套画板工具）来选择并放置组件实例到舞台上。从工具栏中选择该工具，或使用 N 快捷键启用它。

单击舞台上的任意位置以将组件放置在所需位置。将显示一个菜单，列出可供实例化的组件。如果没有显示任何组件，则您的文件中可能没有标记为组件的画板。

图片

或者，选择工具栏图标右侧的下拉菜单以预先选择组件。该菜单会根据资源选项卡的排序模式而变化——"自定义"模式将按照资源面板中的组织方式显示组件，而"源/类型"模式则将按其来源显示组件。后者将在我们的库功能中发挥作用。

配置组件实例​

添加组件实例后，请选择用于播放的时间轴或状态机。

状态机​

分配实例后，检查器中将显示默认状态机。

图片

如果您暴露了任何输入，则可以通过选项菜单（当选中动画时）或通过输入面板（当选中状态机时）来访问它们。

图片

添加动画​

您可以播放与组件关联的任何动画。您需要使用检查器中的加号按钮将所需的动画添加到实例中。

图片

这些动画可以单独使用、与状态机混合使用，或与其他动画叠加使用。

请注意，在添加动画之前，您必须选择它是简单动画还是重映射动画。

简单动画​

简单动画是一种播放组件时间轴的简单方式。

图片

简单动画允许您在时间轴中设置其起始点。您还可以选择更改动画的播放速度。

重映射动画​

重映射动画允许您在时间轴中设置动画的时间值。这使您可以拉伸、缩短甚至反向播放动画。

图片

请注意，时间值以百分比表示，0% 表示时间轴的起点，100% 表示终点。

混合值​

当您向组件添加更多动画时，动画开始混合在一起。这种混合非常重要，尤其是当多个动画共享关键帧属性时。如果不调整此值，您的组件可能无法按您期望的方式播放动画。

默认情况下，添加到组件的任何动画的混合值均为 100%。您可以在设计模式下调整此值，也可以通过设置关键帧在特定动画中调整此值。请注意，混合值非零的动画将始终与其他动画混合，无论是否设置了播放关键帧。

为确保播放正确的动画，请确保您将所需动画的混合值设置为 100%，并将所有其他动画的混合值设置为 0%。

实例模式​

组件实例可以设置为三种模式之一，这些模式的行为将根据其内容和使用上下文而有所不同。叶子模式和布局模式通常用于父画板需要响应式布局其内容的情况。

节点模式​

这是默认模式，用于非响应式场景。其内容将始终按比例缩放（通过缩放属性）。

叶子模式​

图片

叶子模式将导致组件始终相对于其包含的布局或画板进行定位和调整大小。如果组件包含需要调整大小以适配其容器，但本身不包含布局的元素，则此模式非常有用。

叶子适配方式​

适配类型决定了组件叶子在其分配区域内的缩放方式。

  • 填充（默认）：内容将填充可用视图。如果宽高比不同，则 Rive 内容将被拉伸。
  • 包含：内容将包含在视图内，保持宽高比。如果比例不同，则部分视图将不被使用。
  • 覆盖：Rive 将覆盖视图，保持宽高比。如果内容与视图的比例不同，则内容将被裁剪。
  • 适配宽度：内容将填充视图的宽度。这可能导致裁剪或未填充的视图空间。
  • 适配高度：内容将填充视图的高度。这可能导致裁剪或未填充的视图空间。
  • 无：内容将按画板的原始大小渲染，这可能导致裁剪或未填充的视图空间。
  • 缩小：内容按比例缩小到视图大小，保持宽高比。当内容大于画布时，这等同于包含。如果画布更大，则缩小不会放大。

叶子对齐方式​

对齐类型决定了内容在分配区域内的对齐方式。对齐方式以 3x3 网格形式设置：居中（默认）、左下、中下、右下、左中、右中、左上、中上、右上。

叶子对齐位置 X/Y​

叶子对齐位置是对齐方式的数值表示，可在不需要 9 种对齐选项的情况下使用。数值可以以下方式表示：X = -1（左）、0（居中）、1（右）；Y = -1（上）、0（居中）、1（下）。也可以使用非整数值以各种方式对齐，例如 X = 0.5 将内容定位在居中和右之间的中间位置。

布局模式​

图片

当您的组件包含布局，并且需要在其父容器大小变化时保持响应式时，使用布局模式。这是唯一一种不缩放组件内容的模式，而是改变画板大小以重新流动组件的内容。

布局缩放类型​

  • 固定：布局的固定宽度或高度。定义的值可以是点值或百分比值。使用字段内的单位切换开关在值类型之间切换。
  • 适应内容：布局的宽度和/或高度收缩以适应其子元素。如果您的组件包含文本或其他需要确定其大小的对象，则此模式非常有用。
  • 填充：布局的宽度和/或高度扩展以填充父布局或画板内的可用空间。

布局大小​

当设置为固定时，组件的宽度和高度可以设置为像素值或百分比值。这与缩放属性不同，缩放属性会更改组件的缩放比例。通常，在选择布局模式时不应使用缩放。

暴露输入和事件​

暴露组件的输入和/或事件，以便从父/宿主画板控制它们。这允许您通过状态机用一个组件控制另一个组件。

如何暴露输入​

暴露输入允许父画板访问和操作它。为此，选择所需的输入，然后选中检查器中的"暴露到主画板"选项。

图片

创建组件后，您将在检查器的选项面板和输入面板中看到任何暴露的输入。

在父画板上使用输入​

暴露的输入可以在输入面板或检查器中找到。您可以通过侦听器、事件或在时间轴上设置关键帧来使用它们。

图片

通过侦听器​

当您创建侦听器时，您会找到所有暴露的输入作为侦听器的设置输入属性。例如，此选项允许您同时更改多个画板的布尔输入。

图片

使用事件​

此外，我们可以使用侦听器来侦听从组件触发的事件，并相应地更改输入。

图片

要查看与画板关联的事件，您需要将画板设置为侦听器的目标。该事件现在将列为侦听器操作。

在状态机上设置关键帧​

您可以通过检查器中的选项面板在父画板上为暴露的输入设置关键帧。

例如，当您想在实例中设置文本值时，这是一个方便的技巧。