Framer 和 Rive（Framer and Rive）
了解更多关于 Rive 集成到 Framer 的信息。
概述（Overview）
Framer 允许用户在低代码/无代码平台中快速构建功能性网站。将 Rive 集成到 Framer 网站中，无需使用运行时编写自定义代码即可构建和控制动画和交互式内容。请参阅下面的内容了解如何开始。
入门（Getting Started）
Rive 和 Framer 集成演示
通过 Framer 集成，您可以获得对 Rive 的控制，包括以下选项：
- 播放控制（Playback controls）
- 影响画布上 Rive 布局的配置选项
- 状态机输入
1. 创建分享链接（Make a Share Link）
首先，在 Rive 编辑器中生成 一个新的分享链接，并从 Rive 编辑器复制 Framer 代码片段。
从 Rive 编辑器生成的 Framer 代码片段
2. 将代码片段粘贴到 Framer（Paste Code Snippet into Framer）
在您的 Framer 项目的左侧面板中，点击*资源（Assets）标签，在代码（Code）*部分添加一个新的代码组件文件。
在 Framer 中添加代码组件
在新的代码文件中，用从 Rive 复制的 Framer 代码片段替换所有样板代码并保存文件。您应该会看到您的 Rive 文件的预览，播放在生成分享链接时设置的动画或状态机。
在新组件中粘贴的 Rive Framer 片段
现在您可以在任何 Framer 页面中嵌入这个新创建的 Rive 组件。将组件拖放到您的页面中并根据需要调整大小。
将 Rive 代码组件添加到页面
3. 在 Framer 中控制您的 Rive 文件（Control your Rive File in Framer）
当您放入 Rive 组件时，您会注意到在属性面板（右侧）上有一些特定于 Rive 组件的新选项。每个 Rive 组件的视图可能看起来都不同，因为某些属性是动态生成的。请参阅下面关于控制 Rive 的配置选项的更多信息。
控制 Rive：布局（Controlling Rives: Layout）
有两个设置用于控制动画在画布显示中的渲染方式：
适应（Fit）- Rive 内容如何适应视图大小对齐（Alignment）- Rive 内容如何相对于视图边界对齐
在这里了解更多关于不同选项的信息：布局
控制 Rive：动画播放控制（Controlling Rives: Animation Playback Control）
默认情况下，Rive 将自动播放生成分享链接时指定的动画/状态机。但是，如果需要，您可以控制 Rive 何时播放和/或暂停。有两个播放控制选项：
播放（Playback）- 在 Framer 预览/发布模式下播放或暂停 Rive在画布上播放（Play on Canvas）- 在 Framer 画布模式下播放或暂停 Rive
控制 Rive：状态机输入（Controlling Rives: State Machine Inputs）
如果您使用状态机生成分享链接，您可以在 Framer 页面上访问所有相关的状态机输入进行操作。这意味着您可以通过交互（如用户点击或悬停按钮）将状态机输入值连接到 Framer 组件变体。
例如，假设我们想要在用户悬停在画布下方的"Hover Me"按钮上时激活下面的开关示例。要实现这一点，我们将通过将 Rive 组件与按钮组合在一起创建一个新的 Framer 组件。
已分组的 Rive 和按钮组件
在这个主要变体中，我们在属性面板中保持 Rive 组件的默认状态机输入 isPressed 为 false。接下来，我们将创建这个组的另一个变体 SwitchOn，其中 isPressed 设置为"是"（true）。
添加 isPressed 设置为"是"的变体
最后，我们将在发生 MouseEnter 交互时创建从 Primary 变体中的按钮到 SwitchOn 变体的转换。
将按钮交互连接到 SwitchOn 变体
这有效地将按钮的悬停状态连接到 isPressed 状态机输入的 true 值，并相应地更改 Rive 组件的状态机。
按钮切换 Rive 状态机输入
虽然这是将状态机连接到 Rive 画布外部用户交互的一种方式，但还有许多其他场景。查看 Framer 的学习页面以了解更多。
注意，在上面的示例场景中，可以通过在 Rive 编辑器中使用监听器来实现类似的结果，但因为我们想要从 Rive 画布外部推进状态机，所以我们需要手动操作状态机输入。
还有别的方式
分享链接是付费的功能，除了这种分享链接集成方式，你还可以使用 Rive 的 Framer 插件。这样就可以将.riv 文件直接拖到 Framer 中，而不需要使用分享链接。