App 复杂动画实现——Rive 保姆级教程 | 京东云技术团队

2023-04-23
北京
本文字数：2243 字
阅读完需：约 7 分钟

作者：京东物流沈明亮

在 App 开发过程中，如果想实现动画效果，可以粗略分为两种方式。一种是直接用代码编写，像平移、旋转等简单的动画效果，都可以这么干，如果稍微复杂点，就会对开发工程师的数学功底、图形图像学功底有很高的要求。
另一种方式，可以让 UI 同学配合，一次性出多张图片或者直接出一张 GIF 图，通过短时间内快速轮播图片的方式来实现复杂动画效果，这种方式真正实现起来还是有挺多问题的，比如缺少对动画过程的控制、图片尺寸的适配等等。那么，有没有更好的解决方案呢？
有的，Rive。

简介

Rive 是专门为简化动画的实现而生的，设计师可以在其官网通过拖拉拽实现各种复杂动画效果，设计完毕后导出动画文件，工程师可以在 App 里直接导入此文件，配合相应的 SDK 即可实现。

其官网有详细的开发文档，同时也有自己的社区资源，我们可以直接从社区里下载别人设计好的动画效果进行学习。另外特别重要的是，Rive 支持跨平台，同时支持 Android、iOS、Flutter、JS、React、C++等等，本文以 Flutter 的实现为例介绍。

一个完整的例子

登陆 Rive 官网进行设计，并导出相应的动画文件，Rive 的动画文件是以.riv 结尾。

本文示例是从官网的社区里找的一个个人比较喜欢的动效。

依次运行下面的命令，引入 rive sdk。

将导出的.riv 文件放到资源目录下，并修改 pubspec.yaml 文件。

加载动画文件并展示的核心代码：

核心代码就这么多，对于代码中的标注详细说明下：

标注 1 的地方，主要作用是获取状态机控制器，fromArtboard 方法有两个参数，第二个参数是状态机的名称，这个名称需要和 UI 同学协商好，一旦确定好名称就不允许设计同学再改了，对应于设计面板界面的左下角，如下图：

标注 2 的地方，本例的动画是根据“数值”的变化而变化的，findInput 的入参同样需要和 UI 同学协商好，一旦设计时把这个名字改了，代码里也别忘了进行相应的修改，也在设计面板的左下角，在状态机名称的右边，如下图：

完整的代码如下，大家可以按步骤自己操作体验下。

class RiveDemo extends StatefulWidget {  const RiveDemo({Key? key}) : super(key: key);
  @override  State<RiveDemo> createState() => _RiveDemoState();}
class _RiveDemoState extends State<RiveDemo> {  /// 状态机控制器  StateMachineController? controller;  /// 控制输入数值  SMIInput<double>? valueController;  ///画板，配合Rive widget 使用，展示动画效果。  Artboard? riveArtboard;  Timer? timer;
  @override  void initState() {    super.initState();    //加载    rootBundle.load('asset/rives/rive_demo.riv').then((value) async {      final file = RiveFile.import(value);      final artboard = file.mainArtboard;      //1      controller = StateMachineController.fromArtboard(artboard, 'TreeMachine');      if (controller != null) {        setState(() {          artboard.addController(controller!);          //2          valueController = controller!.findInput('input');          valueController!.value = -4;        });      }
      riveArtboard = artboard;    });  }
  @override  void dispose() {    controller?.dispose();    stopAnimation();    super.dispose();  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('Rive Demo'),      ),      backgroundColor: Colors.white,      body: Center(        child: riveArtboard == null ? const CircularProgressIndicator() : Rive(artboard: riveArtboard!),      ),      floatingActionButton: SizedBox(        height: 50,        child: Row(          mainAxisAlignment: MainAxisAlignment.end,          children: [            TextButton(              onPressed: () {                startAnimation();              },              child: const Text('start'),            ),            TextButton(              onPressed: () {                stopAnimation();              },              child: const Text('stop'),            ),            TextButton(              onPressed: () {                resetAnimation();              },              child: const Text('reset'),            ),          ],        ),      ),    );  }
  /// 开始动画  void startAnimation() {    if (timer != null) {      return;    }    timer = Timer.periodic(const Duration(milliseconds: 60), (timer) {      valueController?.value += 0.5;    });  }
  /// 停止动画  void stopAnimation() {    timer?.cancel();    timer = null;  }
  /// 重置动画  void resetAnimation() {    stopAnimation();    valueController?.value = 0;  }}

复制代码

总结

像本例中的动画效果，如果用代码来编写，时间成本会很大很大，如果靠图片的堆积，实现起来也很麻烦，而且由于图片的数量增多，安装包的体积也会增加很多。但是用 rive，实现起来却很方便，可能唯一的成本就是设计师同学的学习成本。

Rive 不仅支持本地动画文件的加载，还可以将动画文件放到服务器上，利用 RiveAnimation.network 方法进行加载。更多的使用示例可以参考：
https://github.com/rive-app/rive-flutter/tree/master/example

发布于: 57 分钟前阅读数: 5

原文链接:【http://xie.infoq.cn/article/7bd48fbec5006eeddc1831952】。文章转载请联系作者。

京东科技开发者

关注

拥抱技术，与开发者携手创造未来！ 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者，提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】，欢迎大家来玩

发布

暂无评论

创作场景

App 复杂动画实现——Rive 保姆级教程 | 京东云技术团队

简介

一个完整的例子

总结

京东科技开发者

评论