在Flutter中重播相同的Flare动画 [英] Replaying the same Flare animation in Flutter

问题描述

我正在尝试在Flutter中重新播放Flare动画.完成动画后不循环播放.我希望动画可以按需播放，并且是相同的动画.

I'm trying to re-play a Flare animation in Flutter. Not loop the animation when it has complete. I want an animation to be played on demand, the same animation.

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

When I switch between animations it works fine when just swapping the string and calling setState. Is there a simple way to do this.

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

Here's what I'm currently doing.

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)));
   }
}

点击动画时我的日志结果

My logs result when I tap the animation

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

所有内容都被调用，它是第一次播放，但是此后不会重播动画.

Everything is called, it plays the first time, but after that the animation doesn't replay.

推荐答案

一种更干净的方法是使用自定义FlareController.有一个具体的FlareControls实现非常适合此用例.

A cleaner way to do this is using a custom FlareController. There's a concrete FlareControls implementation that fits this use case nicely.

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的任何调用都会将传入的动画混合在此背景空闲动画上.如果您不希望/不需要背景动画，则只需忽略动画:"idle"参数.

Note that this example also plays an idle background animation which loops. Any call to FlareControls.play will mix the incoming animation over this background idle animation. You simply omit the animation: "idle" argument if you don't want/need a background animation.

此处的完整示例: https://github.com/luigi-rosso/flare_controls

这篇关于在Flutter中重播相同的Flare动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！