在 Flutter 中重播相同的 Flare 动画

Question

我正在尝试在 Flutter 中重新播放 Flare 动画。动画完成后不循环播放。我想要一个动画按需播放，同样的动画。

当我在动画之间切换时，只需交换字符串并调用 setState 即可正常工作。有没有一种简单的方法可以做到这一点。

这就是我目前正在做的事情。

class _FlareDemoState extends State<FlareDemo> {

  String animationToPlay = 'activate';

  @override
  Widget build(BuildContext context) {

    print('Animation to play: $animationToPlay');

    return Scaffold(
      backgroundColor: Colors.purple,
      body: GestureDetector(
        onTap: () {
          setState(() {

          });
        },
        child: FlareActor('assets/button-animation.flr',
            animation: animationToPlay)));
   }
}

当我点击动画时我的日志结果

I/flutter (18959): Animation to play: activate
I/flutter (18959): Animation to play: activate
I/chatty  (18959): uid=10088(com.example.flare_tutorial) Thread-2 identical 2 lines
I/flutter (18959): Animation to play: activate
I/flutter (18959): Animation to play: activate
I/chatty  (18959): uid=10088(com.example.flare_tutorial) Thread-2 identical 7 lines
I/flutter (18959): Animation to play: activate
I/flutter (18959): Animation to play: activate
Reloaded 2 of 495 libraries in 672ms.
I/flutter (18959): Animation to play: activate

一切都被调用，它第一次播放，但之后动画不会重播。

Answer 1

一种更简洁的方法是使用自定义 FlareController。有一个具体的 FlareControls 实现非常适合这个用例。

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("success");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FlareActor("assets/Teddy.flr",
          animation: "idle",
          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),
      ),
    );
  }
}

请注意，此示例还播放循环的空闲背景动画。对 FlareControls.play 的任何调用都将在此背景空闲动画上混合传入动画。如果您不想要/不需要背景动画，您只需省略 animation: "idle" 参数。

完整示例：https : //github.com/luigi-rosso/flare_controls