本文与 Marko Dogramadzi 合作撰写。
网页设计趋势永不停歇。最令人兴奋的新发展之一是通过动态图形和动画实现的互动性。
输入 里沃，一个强大的动画平台，弥补了运动设计和交互性之间的差距。它使设计师能够快速创建可用于网络、移动设备和游戏的可生产图形。
Rive 如此有前途的原因是其革命性的 状态机。想象一个动画角色能够行走、慢跑和奔跑。每个动画序列都会变成一个独特的状态。将当前状态传递给 Rive 运行时引擎，其状态机将无缝处理任何转换，从而为最终用户带来流畅、引人入胜的体验。交互性游戏规则的改变者。
即使是最复杂的设计和动画也保持轻量，通常不到 30KB。告别笨重的 GIF 或视频文件。使用 Rive，动画加载迅速，提升整体性能。
对于已经具有动态设计背景的人来说，Rive 的使用非常直观。对于渴望探索动画世界的新手来说， Rive 入门 页面是一个完美的起点。
正如你所看到的，我们是 Rive 的忠实粉丝。因此，我们想到了一个问题，我们能否将 Rive 引入 Mendix 以低代码的方式？
没错！ 事实上，我们已经创建了一个 全新小部件 感谢您在下次使用 Rives Mendix 项目。无论您是创建引人入胜的注册页面还是可视化制造工厂的生产线，此小部件都可以让您充分利用可用于生产的图形的强大功能。
河流状态机
配置 Mendix Rive 控制器小部件，了解如何控制 Rive 小部件非常重要。
Rive 动画封装在 .riv 文件中，可以包含一个或多个状态机。状态机是动画的集合，可实现不同状态之间的无缝过渡，您可以使用它们来创建流畅且响应迅速的 UI 元素。
状态机有几个 输入，可以是以下三种类型之一：
- 布尔输入：充当可以打开或关闭的开关。每个状态机在特定时间只能将一个布尔输入设置为 true。
- 触发输入：与布尔值类似，但只能在短时间内变为真。可用于触发特定动画序列，然后返回到预定义状态。
- 号码输入：接受一个整数参数来管理动画显示，例如确定角色的运行速度或跟踪评论中剩余的星星数量。
控制这些输入允许您执行 Rive 文件中定义的所有可能的动画和过渡。
那么，你有一个很棒的 Rive 动画创意。如何将其嵌入到你的 Mendix 应用程序吗？
创建你的第一个 Rive
我们将创建一个交互式登录页面。该页面允许用户在熊的注视下输入他们的登录凭据！
[如果你想了解更多关于我们熊的创作，Rive 团队已经整理了一个 详细的博客 解释它的创作。
- 首先，我们需要创建 Rive 并将其导出为 .riv 文件。
我们将使用 Rive 社区的 Bear， 由胡安卡洛斯创建，您可以下载 开始.
- 下载并导入 Rive 动画控制器模块 来自 Mendix 将市场纳入您的项目。
存储 .riv 文件
在 Rive Controller 模块中，有一个概览页面，用于管理要在应用程序中显示的 .riv 文件。这允许在应用程序本身内托管任意数量的 .riv 文件，并在将文件加载到页面上时按需提供给 Rive Canvas 小部件。
添加 Rive 文件时，必须指定“Rive 名称”属性。此名称用于 Rive 控制器小部件参数（Rive 名称）中，以将小部件指向正确的 Rive。
- 将 RiveFile_Overview 添加到导航中，使管理员可以访问。这是您将托管 .riv 文件的地方
- 运行您的应用程序并访问 RiveFile_Overview 页面。
- 上传我们的 .riv 文件并提供唯一的“Rive 名称”。在此示例中，我们将其简单地命名为“bear”。
检查状态机
在将 Rive 文件集成到我们的应用程序之前，我们首先要了解它支持的所有交互。
Visual Studio Code 提供了一个方便的扩展， vscode-rive-viewer，允许开发人员直接在编辑器中打开 .riv 文件。此工具可以清晰地查看可用的状态机及其相应的输入。
我们的 Bear 支持五种输入：
2 个布尔输入（成功和失败）
2 个触发输入（检查和举手）
1 数字输入（查看）
创建我们的交互式登录页面
- 创建一个新页面“登录”，其中包含两个输入字段：用户名和密码。
使用 RiveState 实体管理 Rive 动画
Rive 动画控制器模块具有一个多功能非持久实体 (NPE)，即 RiveState，用于管理 Rive 动画的当前状态。此实体包含动画操作所需的所有标准属性。但是，在处理数字输入时，这些输入会根据数值影响动画的行为，因此需要额外的步骤。
我们建议通过创建专门的实体来扩展 RiveState。此专门的实体将继承通用属性并允许您添加自定义数字输入。
- 创建一个新的实体“Bear”，它是 RiveState 的泛化。将我们的数字输入添加为整数属性“LookValue”。
- 在我们的页面中添加一个数据视图，它返回 Bear 对象并作为我们的 Rive 动画的数据源。
- 在此数据视图中添加 RiveController 小部件
- 根据 Bears 状态机模型（从步骤 5 开始）配置 Rive 控制器属性。
小部件参数
我们希望 Rive Controller 小部件能够通过可配置的小部件属性显示所有可能的 Rive 动画文件。需要将以下参数设置为小部件的输入：
-
- Rive 名称：Rive 文件的名称（在 RiveFile 实体中设置）
- 状态机名称：Rive 文件的状态机名称
- 布尔输入名称：Rive 的所有“布尔”状态机输入的名称
- 活动输入（布尔）：活动布尔状态机输入的名称（可以通过更改属性值来更新）
- 触发器输入名称：Rive 的所有“触发器”状态机输入的名称
- Active Input (Trigger)：Active Trigger 输入的名称（可以通过更改属性值来设置）
- 数字输入名称：Rive 的所有“数字”状态机输入的名称，其中整数属性为每个数字输入提供值
运行项目并成功！我们的熊正在看守我们的登录表单。
接下来我们将添加交互性，以便熊能够响应用户的输入。
控制动画
“active”布尔值和触发器状态机输入属性允许您通过将属性值更新为输入的名称来配置要更新的动画。最好在 nanoflow 中执行此操作。
对于布尔输入，将“活动输入（布尔）”属性的值设置为要激活的布尔输入的名称。其余的将设置为非活动状态。
对于触发器输入，将“活动输入（触发器）”属性的值设置为要触发的触发器输入的名称。触发器触发后，小部件会自动将属性值设置为空字符串。
对于数字输入，可以随时更新与某个数字输入对应的数字属性。动画将更新以反映新值。
这意味着微流/纳流可以触发某些动画，确保 Rive 完全融入 Mendix 应用程序。
- 为我们的熊添加互动性。
对于每次交互，创建一个 Nanoflow，它会根据用户操作改变状态。
交互模型
| 互动 | 输入类型 | 逻辑 |
| 在 Enter 处输入用户名 | 布尔 | 将布尔输入“ActiveStateNameBoolean”更改为“检查”。
熊会往下看。 |
| 更改用户名输入 | 联系电话 | 将数字输入“LookValue”更改为用户名的字符长度。
当用户输入时，熊的眼睛会从左向右移动。 |
| 输入密码后回车 | 布尔 | 将布尔输入“ActiveStateNameBoolean”更改为“hands_up”。
熊用爪子遮住眼睛。 |
| 点击登录 | 触发端口 | 如果登录成功，则将触发器输入“ActiveStateNameTrigger”更改为“成功”，让熊笑起来。
如果登录不成功，就把触发输入‘ActiveStateNameTrigger’改成“失败”，让熊喘不过气来。 |
继续构建项目中剩余的交互。
运行应用程序，我们现在有了完全交互式的 Bear 登录屏幕！
交互式工作示例
您可以查看我们内部的完整交互式登录屏幕 演示应用程序在这里.
只需使用以下凭证：
用户名： 管理員
密码： 河密码
此 Rive 动画控制器模块 包含此处提到的所有示例，以帮助您入门。
下载 Rive 动画控制器并为您的下一个 Mendix 应用程序！