如何在颤振中点击动画时切换动画

Question

我是 rive 和 flutter 的初学者。我正在 flutter 中构建收藏夹页面。如果没有添加到收藏夹的任何内容，我需要在屏幕上显示 riveAnimation。我已经实现了几乎所有内容以在屏幕上显示 animation。但是我需要在用户点击非常酷的动画时切换跳跃动画。现在我有 'Idle' 模式

的动画

您可能需要参考 rive 文件 => Go to Rive。我将 Rive stateMachine 名称重命名为 Bird。其他都一样。

summary => 我想让小鸟在用户点击他时跳起来:)

代码和图片可能有点大。对此感到抱歉

class Favourites extends StatefulWidget {
  Favourites({Key? key}) : super(key: key);

  @override
  State<Favourites> createState() => _FavouritesState();
}

class _FavouritesState extends State<Favourites> {
  String animation = 'idle';
  SMIInput<String>? _birdInput;
  Artboard? _birdArtboard;

  void jump() {
    setState(() {
      _birdInput?.value = 'Pressed';
    });
  }

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/rive/bird.riv').then(
      (data) {
        final file = RiveFile.import(data);
        final artboard = file.mainArtboard;
        var controller = StateMachineController.fromArtboard(
          artboard,
          'Bird',
        );
        if (controller != null) {
          artboard.addController(controller);
          _birdInput = controller.findInput('Pressed');
        }
        setState(() => _birdArtboard = artboard);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final favourite = Provider.of<Favourite>(context);
    return Scaffold(
      backgroundColor: Colors.grey[300],
      appBar: const CustomAppBar(title: 'Favourites'),
      body: favourite.items.isEmpty
          ? Center(
              child: Column(
                children: [
                  SizedBox(
                    width: 300,
                    height: 500,
                    child: _birdArtboard == null
                        ? const SizedBox()
                        : Center(
                            child: GestureDetector(
                              onTap: () {},
                              child: Rive(artboard: _birdArtboard!),
                            ),
                          ),
                  ),
                   NeumorphicButton(),
                ],
              ),
            )
          : CustomGrid(),
    );
  }
}

Answer 1

如果你open/run rive 站点上的rive 文件，你会发现它使用Trigger 变量进行跳转，并且它使用State Machine 1 状态机。

接下来是声明变量。您需要为此使用 SMITrigger 数据类型并使用 StateMachineController 来控制动画。

SMITrigger 使用 .findSMI(..) 而不是 .findInput()。

要在触发器上启动动画，请使用

 trigger?.fire();

我鼓励您在执行动态动画时查看编辑器并检查输入变量类型。

所以提供动画的完整小部件是

class Favourites extends StatefulWidget {
  const Favourites({Key? key}) : super(key: key);

  @override
  State<Favourites> createState() => _FavouritesState();
}

class _FavouritesState extends State<Favourites> {
  String animation = 'idle';

  Artboard? _birdArtboard;
  SMITrigger? trigger;
  StateMachineController? stateMachineController;

  @override
  void initState() {
    super.initState();
    rootBundle.load('assets/rive/bird.riv').then(
      (data) {
        final file = RiveFile.import(data);
        final artboard = file.mainArtboard;
        stateMachineController =
            StateMachineController.fromArtboard(artboard, "State Machine 1");
        if (stateMachineController != null) {
          artboard.addController(stateMachineController!);
          trigger = stateMachineController!.findSMI('Pressed');

          stateMachineController!.inputs.forEach((e) {
            debugPrint(e.runtimeType.toString());
            debugPrint("name${e.name}End");
          });
          trigger = stateMachineController!.inputs.first as SMITrigger;
        }

        setState(() => _birdArtboard = artboard);
      },
    );
  }

  void jump() {
    trigger?.fire();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(
          child: Column(
            children: [
              SizedBox(
                width: 300,
                height: 400,
                child: _birdArtboard == null
                    ? const SizedBox()
                    : Center(
                        child: GestureDetector(
                          onTap: () {
                            jump();
                          },
                          child: Rive(artboard: _birdArtboard!),
                        ),
                      ),
              ),
            ],
          ),
        ));
  }
}

如何在颤振中点击动画时切换动画

How to toggle rive animation when tapped on the animation in flutter

animation

dart

flutter

rive