在 Flutter 中更改 Rive 2 动画答案

【问题标题】：Changing Rive 2 Animation in Flutter在 Flutter 中更改 Rive 2 动画
【发布时间】：2021-02-26 19:53:26
【问题描述】：

我有一个使用 Rive 2 创建的 .riv 文件。它包含多个动画。

我想播放默认动画，但要根据流中的输入进行更改。

以下代码仅播放“默认”动画，即使 switch case 发生变化也不会更新。代码跳转到正确的 switch case 语句，我用日志检查了它。但动画并没有改变。

如何从 Rive 画板播放不同的动画？

州级：

class _GraphicState extends State<Graphic> {
  final riveFileName = 'assets/rive/character.riv';
  Artboard _artboard;

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

  // loads a Rive file
  void _loadRiveFile() async {
    final bytes = await rootBundle.load(riveFileName);
    final file = RiveFile();

    if (file.import(bytes)) {
      // Select an animation by its name
      setState(() => _artboard = file.mainArtboard
        ..addController(
          SimpleAnimation('default'),
        ));
    }
  }

构建函数：

@override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: widget.gameStageBloc.hangingParts,
        builder: (BuildContext ctx, AsyncSnapshot<int> status) {
          return Container(
            width: 350.0,
            height: 350.0,
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: 350.0,
                height: 350.0,
                child: selectGraphic(status),
              ),
            ),
          );
        });
  }

返回正确动画的自定义函数：

Widget selectGraphic(state) {
    if (_artboard != null) {
      switch (state) {
        case 1:
          _artboard.artboard..addController(SimpleAnimation('run'));
          break;
        case 2:
          _artboard.artboard..addController(SimpleAnimation('stand'));
          break;
        case 3:
          _artboard.artboard..addController(SimpleAnimation('dead'));
          break;
        default:
          _artboard.artboard..addController(SimpleAnimation('default'));
      }
      return Rive(
        artboard: _artboard,
        fit: BoxFit.cover,
      );
    } else {
      return Container();
    }
  }

【问题讨论】：

标签： flutter animation flutter-animation rive

【解决方案1】：

嗯，你可以使用“Mixing Rive 动画”reference

代码：

AnimationController animationController;
final String animationSell  = "sell_item";
final String animationAdd   = "add_item";
final String animationEmpty = "empty_cart";
final riveFileName          = 'assets/animation/cart.riv';
Artboard _artboard;
RiveAnimationController _wipersController;

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

void _loadRiveFile() async {
    final bytes = await rootBundle.load(riveFileName);
    final file = rive.RiveFile();
    if (file.import(bytes)) {
      setState(() => _artboard = file.mainArtboard..addController(rive.SimpleAnimation(animationSell)));
    }
}

void _wipersChange(KartState state) {
    switch (state.index) {
      case 0:
        _artboard.addController(
          _wipersController = rive.SimpleAnimation(animationEmpty),
        );
        break;
      case 1:
        _artboard.addController(
          _wipersController = rive.SimpleAnimation(animationAdd),
        );
        break;
      case 2:
        _artboard.addController(
          _wipersController = rive.SimpleAnimation(animationSell),
        );
        break;
      default:
        _artboard.addController(
          _wipersController = rive.SimpleAnimation(animationEmpty),
        );
    }
}

并将小部件放在任何地方

Container(
   height: 100.0, width: 100.0,
   child: Rive(
      artboard: _artboard,
      fit: BoxFit.scaleDown,
      alignment: Alignment.center,
   ),
)

【讨论】：

【解决方案2】：

尝试每次调用setState(() => {})_artboard.artboard..addController

【讨论】：