如何在每次点击时播放相同的 Flare 动画？

Question

只有在这样点击对象时才能运行动画？

class _MyHomePageState extends State<MyHomePage> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            isOpen = !isOpen;
          });
        },
        child: FlareActor('assets/heart.flr',
            animation: isOpen ? 'run' : 'x'),
      ),
    );
   }
  }

但我需要在每次点击时运行相同的动画，这是行不通的：

GestureDetector(
        onTap: () {
          setState(() {
          });
        },
        child: FlareActor('assets/heart.flr',
            animation: 'run'),
      )

我也试过这个：

GestureDetector(
        onTap: () {
          setState(() {
            isOpen = !isOpen;
          });
        },
        child: FlareActor('assets/heart.flr',
            animation: isOpen ? 'run' : 'run'),
      )

Answer 1

我最近在实施一些事情时遇到了同样的问题。我的问题得到了回答，您可以使用 FlareControls 并调用 play 而不是使用按键来播放动画。 Original post.

class _MyHomePageState extends State<MyHomePage> {
  // Store a reference to some controls for the Flare widget
  final FlareControls controls = FlareControls();

  void _playSuccessAnimation() {
    // Use the controls to trigger an animation.
    controls.play("run");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlareActor("assets/heart.flr",
          animation: "run",
          fit: BoxFit.contain,
          alignment: Alignment.center,
          // Make sure you use the controls with the Flare Actor widget.
          controller: controls),
      floatingActionButton: FloatingActionButton(
        onPressed: _playSuccessAnimation,
        tooltip: 'Play',
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

我也有a video 解释如何整合这些动画并重播相同的动画。