如何在颤动中显示 Rive 动画？答案

【问题标题】：How to show Rive animation in flutter?如何在颤动中显示 Rive 动画？
【发布时间】：2022-01-03 11:51:14
【问题描述】：

我正在尝试显示来自我的 riv 耀斑的动画。在 FlareActor 和 flr 文件中真的很简单。但无法用 riv 显示我的动画。我的 riv 文件中有 2 个动画。它们是 anim1 和 anim2。我试图将 anim1 显示为默认值。然后尝试根据条件更改它。这是我的代码 sn-p。

  late RiveAnimationController? _controller;
  Artboard? _riveArtboard;

  @override
  void initState() {
    super.initState();
    _loadRiveFile();
  }

  void _loadRiveFile() async {
    await rootBundle.load('assets/animations/anim_file.riv').then(
          (data) async {
        final file = RiveFile.import(data);
        final _artboard = file.mainArtboard;
        _artboard.addController(_controller = SimpleAnimation('anim1'));
        setState(() => _riveArtboard = _artboard);
      },
    );
  }

这是构建函数：

GestureDetector(
  onTap: () => {getStatus},
  child: _riveArtboard == null ? const SizedBox.shrink(): Rive(artboard: _riveArtboard!))),

我错过了什么？或者我怎样才能显示我的动画？我也试过设置控制器，但没有用。

【问题讨论】：

标签： flutter flare rive

【解决方案1】：

Rive 提供StateMachineController 来切换动画。如果你想使用SimpleAnimation，你可以按照这种方式。

  // on state class
  RuntimeArtboard _riveArtboard = RuntimeArtboard();
  final SimpleAnimation anim1 = SimpleAnimation('anim1');
  final SimpleAnimation anim2 = SimpleAnimation('anim2');

要在动画之间切换，您需要移除之前的控制器并添加您喜欢的动画。

  playAnim2(){
   _riveArtboard.artboard..removeController(anim1)
   ..addController(anim2);
 }

您可以访问遵循此模式的this repository。

我会鼓励你使用StateMachineController

在这种情况下，在 rive 上实现动画时需要某种输入值。

在飞镖级别，

 /// on state class
  StateMachineController? controller;
  SMIInput<bool>? isAnim1; // true from rive
  Artboard? _riveArtboard;

你需要根据你的场景提供isAnim1.value= false，它会切换动画。

检查this question on Stackoverflow 和GitHub repository。

【讨论】：