在 Flutter 中更改 Rive 2 动画

Posted 2023-02-23

【中文标题】在 Flutter 中更改 Rive 2 动画

【英文标题】：Changing Rive 2 Animation in Flutter

【发布时间】：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();
    
  

【参考方案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