Flutter中如何实现RiveAnimation循环播放？

情况1：基于状态机（State Machine）的循环设置 #

当使用StateMachineController时，需要找到状态机内的具体动画轨道，手动设置其循环模式：

SizedBox(
  height: 200,
  child: context.rive.phoneInternetBubblesBlingWormRIV.copyWith(
    onInit: (artboard) {
      _riveController = StateMachineController.fromArtboard(
        artboard,
        'State Machine 1',
      );

      if (_riveController != null) {
        // 替换为你在Rive编辑器中定义的动画名称
        final targetAnimation = _riveController!.findAnimation('Animation Name');
        if (targetAnimation != null) {
          // 设置循环模式：Loop.loop 循环播放，Loop.pingPong 来回播放
          targetAnimation.loop = Loop.loop;
        }
        artboard.addController(_riveController!);
      }
      setState(() {});
    },
  ),
)

情况2：直接使用单个动画控制器（无需状态机） #

如果你的动画不需要状态机逻辑，改用SimpleAnimation控制器可以直接设置循环参数：

SizedBox(
  height: 200,
  child: RiveAnimation.asset(
    // 替换为你的Rive文件路径
    'assets/phone_internet_bubbles.riv',
    animations: ['Animation Name'],
    loop: Loop.loop, // 直接指定循环模式
  ),
)

备选方案：监听动画结束事件重启 #

如果上述方式不适用，可以通过监听控制器状态，在动画结束时手动重启：

SizedBox(
  height: 200,
  child: context.rive.phoneInternetBubblesBlingWormRIV.copyWith(
    onInit: (artboard) {
      _riveController = StateMachineController.fromArtboard(
        artboard,
        'State Machine 1',
      );

      if (_riveController != null) {
        artboard.addController(_riveController!);
        // 监听动画状态，结束后重启
        _riveController!.addListener(() {
          if (_riveController!.isActive && !_riveController!.isAnimating) {
            _riveController!.reset();
            _riveController!.play();
          }
        });
      }
      setState(() {});
    },
  ),
)

内容的提问来源于stack exchange，提问作者Chris