在 Flutter 中重放相同的 Flare 动画

Posted 2023-02-23

【中文标题】在 Flutter 中重放相同的 Flare 动画

【英文标题】：Replaying the same Flare animation in Flutter

【发布时间】：2019-08-13 13:20:20

【问题描述】：

我正在尝试在 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

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

【参考方案1】：

 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;

                         );
                       
                      ,
                    )

【参考方案2】：

更简洁的方法是使用自定义 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

【讨论】：

噢噢噢噢，看起来好多了。由于某种原因，我找不到类似的东西。让我以这种方式实现它，看看它是否有效。我会尽快回复你。

这是一个比我更好的解决方案。谢谢。

【参考方案3】：

根据@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;
  

这是一种混乱的解决方法，但它可以完成工作。感谢@Eugene 播种。

【讨论】：

为定时器的使用点赞。我想在 1 磅后停止播放动画。计时器有帮助。