Flutter如何知道GIF是否在不循环的情况下完成了动画

Question

如何知道GIF是否播放完毕？我想构建另一个小部件并调用一个函数，但在 GIF 完成一次动画之后。有办法实现这个目标吗？

Scaffold(
  body: Container(
    constraints: const BoxConstraints.expand(),
    child: const Image(
      image: AssetImage(
        "images/splas_screen.GIF",
      ),
      fit: BoxFit.fill,
      
    ),
  ),
);

这就是我目前显示 GIF 的方式，因为我仍然不知道如何只播放 GIF 一次而不循环并在之后调用函数。

Answer 1

您可以使用 flutter_gif 并将

repeat

属性设置为

ImageRepeat.noRepeat

，如下所示：

GifImage(image:AssetImage("images/splas_screen.GIF"), controller: controller,repeat:ImageRepeat.noRepeat ),

这是您需要的完整示例：

class TestAnimation extends StatefulWidget {
  const TestAnimation({super.key});

  @override
  State<TestAnimation> createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation>
    with TickerProviderStateMixin {
  late FlutterGifController controller;
  @override
  void initState() {
    super.initState();
    controller = FlutterGifController(vsync: this);
    controller.animateTo(10, duration: Duration(milliseconds: 300)); // Note that animate to your last frame of your animation, here mine is 10.
    controller.addListener(() {
      if (controller.isCompleted) {
        print("compleate");
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Testing")),
      body: Column(
        children: [
          GifImage(
            image: AssetImage("assets/images/Pivot_Wave.gif"),
            controller: controller,
            repeat: ImageRepeat.repeat,
          ),
        ],
      ),
    );
  }
}

更新 不再支持 flutter_gif，因此您可以使用 gif_view 并使用

onFinish

属性来了解它何时完成，如下所示：

class TestAnimation extends StatefulWidget {
  const TestAnimation({super.key});

  @override
  State<TestAnimation> createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation> {
  var controller = GifController();

  @override
  void initState() {
    super.initState();
    controller = GifController(
     loop: false,
     onFinish: () {},// do what ever you want when gif finished
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Testing")),
      body: Column(
        children: [
          GifView.asset(
             "assets/images/Pivot_Wave.gif",
             controller: controller,
             height: 400,
             width: 300,
          ),
        ],
      ),
    );
  }
}

Answer 2

https://stackoverflow.com/a/77314988/18102423

如果您使用 GifView 它具有

onFinish

属性。

Answer 3

尝试使用这个包

flutter_gif：^0.0.4