如何在Flutter中显示动画图片？

Question

我希望在Flutter中显示一个动画图片，无论其格式如何。事实是，目前似乎只有一种解决方案，video_loader。这仅适用于全屏，但不适合我的用例。

关于如何解决这个问题的任何想法？

Answer 1

现在，Image小部件支持GIF。 （4月18日）

对于Ex。

new Image(image: new AssetImage("assets/ajax-loader.gif"))

Answer 2

您可以使用https://ezgif.com/split将帧拆分为单独的图像，并将它们作为资源添加到pubspec.yaml中。

然后使用Animation<int>选择要显示的正确帧。确保设置gaplessPlayback: true以避免闪烁。

例如，以下代码显示由Guillaume Kurkdjian创建的animated GIF的帧。

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: new ThemeData.dark(),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<int> _animation;

  @override
  void initState() {
    _controller = new AnimationController(vsync: this, duration: const Duration(seconds: 5))
      ..repeat();
    _animation = new IntTween(begin: 0, end: 116).animate(_controller);
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new AnimatedBuilder(
            animation: _animation,
            builder: (BuildContext context, Widget child) {
              String frame = _animation.value.toString().padLeft(3, '0');
              return new Image.asset(
                'assets/frame_${frame}_delay-0.04s.png',
                gaplessPlayback: true,
              );
            },
          ),
          new Text('Image: Guillaume Kurkdjian', style: new TextStyle(fontStyle: FontStyle.italic)),
        ],
      ),
    );
  }
}