跳到主要内容

概述(Overview)

事件是一种向您的运行时代码发送信号以在正确时刻执行代码块的方式。它们通过传递有用的信息来增强设计师和开发人员之间的沟通。通过事件,我们可以做一些事情,比如跳转到 URL、播放声音、显示一些 HTML,或者通过代码完成我们想要实现的任何其他功能。

在设计时和运行时协调 Rive 事件对于确保在应用、游戏等中成功集成非常重要。

创建事件(Creating an Event)

要创建事件,请使用工具栏中的事件工具。一旦工具激活,点击画板上的任意位置来添加新事件。

图片

添加新事件

您会注意到事件显示在画板上和层级中。

配置事件(Configuring an Event)

添加事件后,我们需要使用检查器来配置事件。

图片

事件的检查器视图

名称(Name)

名称字段是我们可以给事件指定特定名称的地方。这很重要,因为在运行时,我们可以将正确的代码片段连接到它们对应的事件。

图片

重命名事件

您也可以直接在画板上重命名事件。

类型(Type)

类型下拉菜单允许您在常规(General)和 URL 之间更改事件类型。

图片

属性(Properties)

属性允许我们定义传递给运行时的额外信息。例如,您可能想要传入在运行时报告事件时要播放的音频文件的名称,或者用于数据分析的其他元数据。

要添加新属性,点击属性旁边的加号按钮。

图片

添加新属性

首先,我们要将属性的名称更改为可识别的名称。接下来,我们需要选择我们的属性将跟踪的值的类型,如数值(Number)、布尔值(Boolean)或字符串(String)。

图片

重命名和选择输入

URL

当选择了"打开 URL"事件时,我们有额外的配置选项。

打开 URL 事件的属性

图片

在文本框中,我们将添加我们想要组件带我们去的 URL。

如果您想链接到新域名,请确保包含 URL 协议(即 "http://" 或 "https://")。

目标(Target)告诉用户的浏览器应该在哪里打开这个 URL。我们有几个选项:空白(Blank)、父级(Parent)、自身(Self)和顶级(Top)。

  • 空白(Blank) - 通常在新标签页中打开链接,但用户可以配置浏览器改为打开新窗口。注意: 如果事件不是从 Rive 监听器发出的,浏览器可能会阻止并通知用户弹出窗口被阻止
  • 父级(Parent) - 在当前浏览上下文的父级浏览上下文中打开。如果没有父级,则表现为"自身"
  • 自身(Self) - 在当前浏览上下文中打开
  • 顶级(Top) - 在最顶层的浏览上下文(当前上下文的"最高"祖先上下文)中打开。如果没有祖先,则表现为"自身"

目前,出于安全考虑,默认情况下,当这种类型的事件在分享链接或社区帖子中报告时,Rive 不会打开 URL。但是,这可能在将来会改变

发送事件信号(Signaling an Event)

我们可以通过三种方式发送事件信号:通过时间轴、在状态上或在转换上。

时间轴(Timeline)

通过时间轴发送事件信号允许我们控制代码片段将触发的精确时刻,比如音效。

首先,选择您想要添加事件的时间轴。接下来,使用检查器中的报告事件按钮。注意,这个关键帧将被放置在播放头的位置。

图片

在时间轴上设置事件关键帧

此外,您可以为属性设置关键帧,让运行时知道特定的布尔值、数值或字符串属性有了新值。

转换和状态(Transition & State)

您可以在转换或状态上报告事件。我们通常这样做是为了在运行时发送关于状态机中正在发生什么的上下文信息。例如,如果我们想要在转换结束时让某个元素出现,我们会想要使用绑定到转换的事件来发送这个信号。

要报告事件,选择所需的状态或转换,并使用检查器中事件部分旁边的加号按钮。

图片

通过状态或转换发送事件信号

下拉菜单允许我们选择我们定义的任何事件。现在我们已经选择了事件,我们可以决定它是在转换或状态的开始还是结束时发送信号。

运行时的事件(Events at Runtime)

有关如何在运行时监听事件的更多信息,请查看 Rive 事件部分。