在 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 的调用都会将传入的动画与此背景空闲动画混合.如果您不想要/不需要背景动画，您只需省略 animation: "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屋！