概述

Rive Flutter（以下简称Rive）是Rive提供的运行库，是一个实时交互设计和动画工具，可以帮助Flutter开发者在应用中嵌入复杂的动画。设计人员和开发人员可以使用协作编辑器创建响应不同状态和用户输入的动态图形，然后使用Rive Flutte库的API 将动画加载到他们的项目中。

为Flutter项目添加Rive动画

使用Widget ：RiveAnimation.asset() 或者 RiveAnimation.network()

1、使用网络资源

RiveAnimation.network('https://路径.riv',
)

2、使用本地资源

RiveAnimation.asset('assets/Rive文件名.riv',
)

一些名词

artboard --画板

画板可以有无限个，但是不能少于一个画板

State Machines -- 状态机（状态控制器）

State Machines 用于组合一组动画。在设动画计中，可以用可视化的操作面板 将动画连接在一起并设置状态转换的逻辑，设计者可以控制并且管理它们。一旦State Machines实例化并开始运行，就可以更改该动画提供给开发者用于操控动画的变量（ bool值、double值、触发触发器）来完成状态转换。（可以登入rive官网尝试设计动画以便理解哟！）

若要在开发中使用StateMachines 控制动画可以先在自定义Utils文件下创建一个静态的方法用于生成StateMachines，然后在实例化Rive动画时传入到其StateMachines参数内

  /// artboard画板/// stateMachineName状态控制器名字static StateMachineController getRiveController(Artboard artBoard,{stateMachineName = "State Machine 1"}) {//返回类型可空，//从一个画板中获取状态控制器StateMachineController? controller =StateMachineController.fromArtboard(artBoard, stateMachineName);//为这个画板添加状态控制器artBoard.addController(controller!);return controller;}

 RiveAnimation.asset("Rive文件名.riv",artboard: "画板名",//初始化时的回调方法   onInit: (artboard) {//要用该画板的状态控制器StateMachineController controller =Utils.getRiveController(artboard,stateMachineName: "stateMachine名字（问动画设计者）");//这个状态控制器 可供使用的inputinput = controller.findSMI("active") as SMIBool;},
)

可以在一些特殊事件的回调中更改input的值，以控制动画

                GestureDetector(//假设在点击事件中更改 State MachineonTap: () {//-----------------------------input!.change(true);//-----------------------------//同步indexif (selectIcon != bottomNavs[index]) {//要求重新绘制setState(() {selectIcon = bottomNavs[index];});}//页面跳转_controller.animateToPage(index,duration: const Duration(seconds: 1),curve: Curves.easeOutQuad);Future.delayed(const Duration(milliseconds: 500), () {bottomNavs[index].input!.change(false);});},//...

选择画板artboard

当一个Rive对象 实例化时，可以指定要使用的artboard。如果没有给出artboard，则使用默认的artboard。一次只能使用一个画板。

RiveAnimation.network(//...artboard: 'Truck'
);

控制动画

每个动画和state machines的播放都可以单独控制。你可以使用play(), pause()和stop()方法播放或暂停。

由于Flutter处理方式与其他环境略有不同。Flutter中的每个动画和state machines都被一个管理动画状态的底层控制器所管理。当您将动画名称列表传递给RiveAnimation时，它将为每个动画创建并管理控制器。为了控制动画，你需要为每个动画实例化一个RiveAnimationController，并将控制器传递给RiveAnimation Widget（而不是它的名称）。您可以混合匹配传入控制器和名称，但要避免传入同一动画。

使用控制器以控制动画：

SimpleAnimation控制器 >> 控制暂停/播放

SimpleAnimation是一个基本的控制器，它提供单个动画的简单播放控制。有了这个控制器，你可以播放、暂停和重置动画。

在下面的例子中，SimpleAnimation的isActive属性用于播放和暂停单个动画。

class PlayPauseAnimation extends StatefulWidget {//...
}class _PlayPauseAnimationState extends State<PlayPauseAnimation> {/// 控制器late RiveAnimationController _controller;/// 一个方法 用于 在播放和暂停动画状态之间切换void _togglePlay() =>setState(() => _controller.isActive = !_controller.isActive);/// 通过控制器是否运行来跟踪动画是否正在播放bool isPlaying = _controller.isActive;@overridevoid initState() {super.initState();//初始化一个SimpleAnimation控制器_controller = SimpleAnimation('idle');}@overrideWidget build(BuildContext context) {return //...(child: RiveAnimation.network(//...// 向动画传入一个控制器controllers: [_controller],// 当Widget初始化时 更新播放状态//里面是一个setState()空体，要求系统重新渲染onInit: () => setState(() {}),),),floatingActionButton: FloatingActionButton(//当点击这个按钮时，控制器暂停变播放（或者播放变暂停），并且重新渲染onPressed: _togglePlay,tooltip: isPlaying ? 'Pause' : 'Play',child: Icon(isPlaying ? Icons.pause : Icons.play_arrow,),),);}
}

OneShotAnimation控制器 >> 控制一次性动画的循环

一次性动画不会循环。OneShotAnimation是一个控制器，当动画已经播放完毕后，它会自动停止并重置一个一次性动画，所以它可以满足重复播放的需要。

OneShotAnimation提供了两个回调函数:onStart()和onStop()，它们将分别在动画开始和停止播放时触发。

//已省略不必要的代码
class PlayOneShotAnimation extends StatefulWidget {//...
}class _PlayOneShotAnimationState extends State<PlayOneShotAnimation> {/// 控制器late RiveAnimationController _controller;/// 当前动画是否播放bool _isPlaying = false;@overridevoid initState() {super.initState();//给控制器赋值_controller = OneShotAnimation('bounce',autoplay: false,//停止播放时: _isPlaying = falseonStop: () => setState(() => _isPlaying = false),//开始播放时: _isPlaying = trueonStart: () => setState(() => _isPlaying = true),);}@overrideWidget build(BuildContext context) {return // ....child: RiveAnimation.network('...',animations: const ['idle', 'curves'],controllers: [_controller],),),floatingActionButton: FloatingActionButton(// 在播放动画时禁用按钮onPressed: () => _isPlaying ? null : _controller.isActive = true,tooltip: 'Play',child: const Icon(Icons.arrow_upward),),);}
}

布局

Rive提供了许多方法来控制你的动画在画布或视图中的布局。Rive允许您控制渲染内容的适合度、对齐方式和偏移量。

通常在实例化Rive对象时提供布局数据，但开发者也可以随时更新这些值。

参数Fit和Alignment可以通过RiveAnimation和Rive构造方法传入。Fit和Alignment参数用法与其在Flutter中的对应选项类似。

// 填充画布，如有必要裁剪
var widget = const RiveAnimation.network('...',fit: BoxFit.cover,
);//适合宽度并对齐到画布的顶部
widget = const RiveAnimation.network('...',fit: BoxFit.fitWidth,alignment: Alignment.topCenter,
);

由于笔者水平有限，若你觉得文章有不足之处，希望你在看到之后能够在评论里指出来，看到之后我尽快的回复你。

Rive在Flutter开发中的基本用法相关推荐

[Dart] Flutter开发中的几个常用函数
几个Flutter开发中的常用函数 /** 返回当前时间戳 */static int currentTimeMillis() {return new DateTime.now().millisecon ...
Flutter 开发中最实用的 Dart 语法知识
零.前言都说 Flutter 是谷歌的新宠,这段时间有空,就学习了一下 Dart 语法.本篇文章将会详细全面的介绍 Dart 常用语法. 一.变量和常量在 Drat 语言中,一切皆对象,对象的默认 ...
WebService开发中SoapException的用法
在ASP.NET Web service开发中,会用到一个很重要的类型:SoapException,它是一个基于Soap请求机制的异常处理类型, 这也是一个很重要的类型,在编写web service函 ...
c#winform开发中DialogResult的用法
1.DialogResult经常用在winform开发中的登录,设置参数中,在主窗体中弹出设置参数的窗体,当我们点击设置参数窗体上的确定按钮时,直接返回设置参数窗体的DialogResult的属性即可 ...
EditText 集锦 - 开发中常用的用法及遇到的各种坑
前言 EditText ,文本输入框,一个再熟悉不过的的控件,在开发当中,我们需要经常用到.这边文章,主要是记录 EditText 的常用用法,需要的时候可以直接复制张贴,提高效率.同时,本文章会持续 ...
flutter开发中常用的dart插件
flutter插件官网地址:https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片,并可以用相机拍摄新照片的flutter插件 2 ...
EditText 集锦 - 开发中常用的用法及遇到的各种坑，androidtv开发视频教程
android:background //设置EditText背景."@null"设置背景为透明.当我们设置背景后,EditText的那条线就会消失. android:textAp ...
【程序设计】接口在软件开发中的普遍用法
文章目录 Interface GUI API 公共接口 [UML/Java]-Interface Interface 接口(Interface)的概念在计算机科学和软件工程领域的许多上下文中使用,并具 ...
iOS开发中extension的用法(延展)
extension可以认为是匿名的category,但是这个extension相对于category有有一个特殊功能: 在extension中可以定义可写的属性,公有可读.私有可写的属性(Public ...

Rive在Flutter开发中的基本用法

概述