Rive

Rive 完全使用 Flutter 重写了他们强大的动画工具,以便开发者能够创建精美的多平台插画。

目标

Rive 允许开发者创建精美的交互式动画并将其部署到任何平台。他们的开源运行时让创作者能够一次制作动画,然后在任何他们想要的平台上发布。

然而,情况并非总是如此。起初,团队花费了大量时间来管理开发周期:维护用于大量 UI 功能的不同客户端网页包、自定义构建流程、自定义开发运维、自定义测试、代码检查、语言服务器等——所有这些都来自需要维护和不断更新的独立软件包。

相反,团队希望获得一个能够涵盖所有这些的框架,确保工作流程这些方面的兼容性,这样他们就可以更多地专注于开发,而不是维护。为了支持其具有实时无卡顿动画的强大用户界面,Rive 需要一个能够处理跨多个浏览器和平台进行大量图形渲染的工具。正是在那时,他们转向了 Flutter。

为什么选择 Flutter?

Rive 的第一个版本完全使用 JavaScript ES5 和 DOM 编写,这对于网页开发非常有效,但对于其他方面则不然。所以接下来他们尝试了使用 ES6 的 React。他们使用了 webpack 和早期版本的 CanvasKit,但维护所有不同平台需要付出巨大的努力。

大约在同一时间,Rive 与 Flutter 团队合作举办了 Flutter Interact 活动。他们对 Flutter 了解得越多,就越觉得它非常适合 Rive。它提供了一个具有出色工具的统一平台、一种强类型编程语言以及强大的语言分析工具,包括标准化格式化程序、内置代码检查、用于流行编辑环境的语言服务器,以及直接从编辑环境中进行测试的能力。

他们的解决方案

团队决定尝试一下 Flutter。他们使用 Flutter 中的 Canvaskit 构建了一个原型,并立即注意到了改进。除了提供真正的多平台解决方案外,它还使新工程师的入职变得更加容易。他们也非常喜欢内置的测试功能,这使得维护应用程序的质量和稳定性变得更加容易。

成果

Rive 推出了完全使用 Flutter 构建的编辑器。他们的代码库现在更容易维护,并允许工程师立即入职并开始编写代码。

他们还发现,在 Flutter 中添加自定义组件非常容易。功能构建变得更简单、更有趣,设计师也能更好地进行修改和构建原型。这使他们能够在 Rive 中开发出更丰富的体验,包括动画、交互式图形以及流畅和响应式布局。

应用程序的整体稳定性也得到了提升。得益于内置的测试功能,他们现在每次构建都会运行数千个测试,这使得他们有信心转向每日发布周期。

基于他们的成功,团队现在正在为 MacOS 推出桌面应用程序。对于此次发布,团队表示他们甚至不需要进行太多定制,因为抽象化工作已经完成。他们还发现,在 Flutter 中添加自定义组件非常容易。功能构建变得更简单、更有趣,设计师也能更好地进行修改和构建原型。这使他们能够在 Rive 中开发出更丰富的体验,包括动画、交互式图形以及流畅和响应式布局。