最佳实践

Rive 旨在高效地在编辑器中以及应用和游戏的运行时播放交互式图形。不过，优化不佳的动画可能会消耗大量资源并导致性能不佳，尤其是在低端设备上。以下章节将概述一些重要注意事项和技巧，帮助你在 Rive 编辑器的设计/动画制作阶段，以及应用运行时阶段，都保持最佳性能并尽量降低资源占用。

我们建议在目标设备/平台上持续测试你的动画。

设计时注意事项

以下是在 Rive 编辑器中保持 Rive 高性能的一些技巧：

资源优化

图片、音频和字体资源通常是导致 .riv 文件体积膨胀的主要来源。未优化的资源会增加下载大小，并且必须加载到内存中，这可能导致运行变慢——尤其是在低端设备上。

只有在画板中使用的资源才会被编译用于运行时。Assets 面板中未在画板中使用的项目不会增加 .riv 文件的大小。

字体

字体文件通常包含数千个你可能并不需要的字形，例如希腊字母、数学运算符和图标。若要减小导出的字体或 .riv 文件的大小，请选择要包含的字形。

栅格图片大小与尺寸

确保图片资源的尺寸适合其用途非常重要。例如，不要使用尺寸很大的图片（如 8192 x 7022）来显示在画板中的一个很小区域（如 100 x 100）。

使用大图片会很快消耗设备内存。在移动设备上尤其如此，因为应用的内存限制更严格。即使这些图片经过压缩，其尺寸仍然会影响应用所使用的内存量。

如果你有一张非常大的图片，并且在任意时刻只会显示其中一部分（例如滚动背景），可以考虑将图片拆分成更小的块，或者混合使用栅格图片，并将其中一部分重新创建为矢量图形。

栅格图片压缩

压缩是指通过各种算法丢弃部分图片数据来减小文件大小。你可以直接在 Rive 编辑器中压缩图片，这意味着你可以保留原始图片，同时为运行时使用压缩后的图片。如果资源嵌入在动画中，这将减小导出的 .riv 文件大小。

为了获得最小的图片文件大小和最佳性能，我们建议使用 WebP Format 导出资源。

矢量图片

请高效控制矢量图片中的顶点数量。少量额外顶点通常不会产生太大影响，但成千上万个顶点可能会带来明显开销。导入由 AI 生成、由栅格图片转换而来，或在绘图应用中创建的矢量图时要尤其谨慎。

Web 上的图层混合模式

混合模式在 Web 上成本尤其高，因为 WebGL 没有暴露访问帧缓冲区的机制。为了应用混合模式，Rive 必须先将渲染后的像素复制到单独的纹理中，然后再进行合成，这会带来显著的性能和内存开销。

虽然目前正在通过新的 WebGL 能力改进这一点，但这些方案仍有待更广泛的支持。在此之前，最好在 Web 项目中谨慎使用混合模式，以确保最佳性能。

画板注意事项

裁剪画板

裁剪画板通常没有问题，但如果你遇到性能问题，则值得尽量减少它们的使用。裁剪在计算上可能比较昂贵，因为渲染器必须评估每个对象——包括组件实例——以确定像素可见性。你可以考虑对画板内的特定对象或组应用裁剪，而不是裁剪整个画板。

在大多数情况下，你可以安全地移除主画板本身的裁剪，因为在运行时，Rive 实例之外的内容不会被渲染。

未使用的画板

未使用的画板仍会包含在编译后的 .riv 文件中，并且在文件首次加载时会被解析。这可能导致不必要的内存占用和性能开销，尤其是当未使用的画板包含复杂动画或大型资源时。为了保持文件轻量且高效，最佳实践是移除所有未实际使用的画板。

空闲动画

如果你的状态机中存在空闲动画状态，并且图形在某个状态下保持静止，请考虑使用“一次性”动画，并确保时间轴动画没有不必要地过长。在运行时的状态机中，如果没有循环动画或活动的混合状态正在播放，运行时会主动将自身“暂停”，直到发生到另一个状态的过渡。这很有用，因为资源消耗（例如 CPU 使用率）可能会降低到 Rive 对应用资源影响几乎可以忽略的程度。

适用场景：图标、按钮、仅根据用户交互播放动画的图形等。

使用 Solos

Solo 类似于组，但额外具备切换嵌套对象渲染的能力。它的工作方式类似单选按钮，会停用同一层级上的其他对象。

当你想显示或隐藏某个特定对象时，使用 Solo 会更高效，因为它会停止渲染所有非活动对象。

Solo 也可以有效地用于构建角色皮肤，但需要注意，这只应在你的皮肤需要绑定和权重时使用。

数据绑定画板

当你想构建更复杂的皮肤（不需要绑定和权重），或者想要替换 widget、图标等内容时，对画板节点进行数据绑定是实现这一点的最高性能方式。

除了只渲染你需要的内容之外，通过只提供所需图形，你还可以同时节省内存和 CPU 使用量。

混合状态

与“空闲动画”中的建议类似，请确保混合状态在可能的情况下能够过渡到其他状态，或在完成后移动到退出状态。当混合状态在运行时被激活时，Rive 会持续播放状态机，即使之后不再需要也是如此。在完成后提供某种离开混合状态的过渡，可以确保 Rive 在播放状态机并判断是否应自我暂停时，需要追踪的“活动”动画更少。

运行时注意事项

以下是在应用中使用 Rive 运行时时保持 Rive 高性能的一些技巧：

带外资源

请参阅我们的加载资源文档。此功能允许你在运行时通过代码动态加载和替换资源（例如字体、图片和音频），并将这些资源提供给你的 Rive 图形。它具有以下好处：

• 减小导出的 .riv 二进制文件大小。
• 资源可以在多个 Rive 文件或应用的其他区域中复用。
• 资源可以预加载并缓存，以便在显示 Rive 图形之前更快可用。
• 资源可以根据用户的屏幕大小和分辨率进行替换，如这个 web JS 示例所示。

缓存你的 .riv

如果你在页面或应用中的多个位置使用同一个 Rive 文件，可以缓存 .riv 文件以提升性能。缓存的主要好处是文件只需要解析和解码一次。与每次实例化画板前都重新解码文件相比，从已缓存、已解码的文件中创建新的画板实例要快得多。

通过程序暂停

在一些情况下，你可能希望通过程序暂停使用 Rive 配置的状态机。通过在运行时暂停 Rive 图形，你可能会发现 Rive 对应用的资源消耗影响几乎可以忽略（例如 CPU）。

1. Rive 图形位于屏幕外
   • 如果 Rive 图形已滚动到屏幕外且不需要继续播放，请调用你所使用运行时对应的 pause API，以防止 Rive 在不需要时继续播放动画并消耗资源。
   • 当图形回到屏幕内并需要继续播放动画时，调用 play API 继续播放 Rive。
2. 无障碍
   • 如果用户在设备设置中指定了偏好减少动态效果，你可能希望在运行时读取此属性，并通过程序调用 pause，或在 Rive 运行时中设置 autoplay: false，以确保这些用户在浏览应用时减少动态效果。或者，也可以创建并在运行时加载行为不同的画板或状态机。
3. 状态机处于静态图形的空闲状态
   • 当 Rive 图形在等待用户交互、数据解析等触发状态机过渡时处于空闲状态，可以调用 pause。

低端设备

Rive 会尽力在所有浏览器/设备上保持高性能运行，但如果可以，请在资源受限的设备上测试你的应用在运行特定 Rive 图形时的表现。你可能会发现，对于某个给定屏幕，包含大量动画的 Rive 文件可能超出了实际需求，因此可以决定显示静态 Rive 图形（即 autoplay: false），或减少任意时刻正在播放动画的 Rive 实体数量。

面向低端设备的一种策略是创建一个减少资源使用/动态效果的替代画板或状态机，并在运行于较旧设备时在运行时动态加载它。