Flutter 在“颤振”中重放相同的光斑动画

我正在尝试在Flatter中重新播放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)));
   }
}

---

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

根据@Eugene的回答，我想出了一个临时解决方案。我将该值设置为空，启动计时器50毫秒，然后将该值设置回我想要再次播放的动画

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: () {
      _setAnimationToPlay('activate');
    },
    child: FlareActor('assets/button-animation.flr',
        animation: animationToPlay)));
  }
}

void _setAnimationToPlay(String animation) {
  if (animation == _animationToPlay) {
    _animationToPlay = '';
    Timer(const Duration(milliseconds: 50), () {
      setState(() {
        _animationToPlay = animation;
      });
    });
  } else {
    _animationToPlay = animation;
  }
}

class\u FlareDemoState扩展状态{
字符串animationToPlay='activate'；
@凌驾
小部件构建（构建上下文）{
打印（“要播放的动画：$animationToPlay”）；
返回脚手架(
背景颜色：Colors.purple，
正文：手势检测器(
onTap:（）{
_setAnimationToPlay（“激活”）；
},
子项：FlareActor（'assets/button animation.flr'，
动画：animationToPlay））；
}
}
void _setAnimationToPlay（字符串动画）{
如果（动画==\u animationToPlay）{
_animationToPlay=''；
计时器（常量持续时间（毫秒：50），（）{
设置状态（）{
_animationToPlay=动画；
});
});
}否则{
_animationToPlay=动画；
}
}

---

这是一个混乱的解决办法，但它完成了工作。感谢@Eugene为您播下种子。

一种更干净的方法是使用自定义FlareControl。有一个具体的FlareControl实现非常适合这个用例

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

class\u MyHomePageState扩展状态{
//存储对Flare小部件某些控件的引用
最终FlareControl控件=FlareControl（）；
void _playSuccessAnimation（）{
//使用控件触发动画。
控制。播放（“成功”）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：FlareActor（“assets/Teddy.flr”，
动画：“空闲”，
适合：BoxFit.contain，
对齐：对齐.center，
//确保将这些控件与Flare Actor小部件一起使用。
控制器：控制器），
浮动操作按钮：浮动操作按钮(
onPressed:_playSuccessAnimation，
工具提示：“播放”，
子：图标（图标。播放箭头），
),
);
}
}

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

---

这里有一个完整的例子：

ooooh，看起来好多了。不知什么原因，我找不到那样的东西。让我用这种方式来实现它，看看它是否有效。我会马上给你回复。这是一个比我的好得多的解决方案。谢谢。竖起大拇指，感谢您使用计时器。我想在1点后停止播放动画。计时器起了作用。

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

 FlareActor(
                      "assets/animation/day_night.flr",
                      alignment: Alignment.center,
                      fit: BoxFit.cover,
                      animation: _animation,
                      callback: (string) {
                       if(string=="switch_night"){
                         setState(() {
                           _animation = _animationNight;

                         });
                       }else if(string=="switch_day"){
                         setState(() {
                           _animation = _animationDay;

                         });
                       }
                      },
                    )