dart - 我们如何使用按钮控制动画 gif 图像？

Question

我想通过单击按钮来控制 gif 动画，即，如果我按下“单击我”按钮动画开始并再次按下动画应该停止。我正在引用这个问题 How to display an animated picture in Flutter?
我不想将 gif 图像分成帧，我必须只使用一个 gif 图像并仅控制它。这是我的代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      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: 3))
      ..stop();
    _animation = new IntTween(begin: 0, end: 7).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  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(0, '0');
              return new Image.asset(
                'assets/lips.gif',
                gaplessPlayback: true,
              );
            },
          ),
          new RaisedButton(
            child: new Text('click me'),
            onPressed: () {
              if (_controller.isAnimating) {
                _controller.stop();
              } else {
                _controller.repeat();
              }
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

目前 Flutter 支持播放 GIF文件使用 Image 小部件。
但是仍然没有简单的方法来控制(例如暂停和播放)GIF文件。在控制它时，一种解决方法是使用包。 Lottie for Flutter可用于实现此行为。

Workaround :

• Convert your gif to mp4 (Gif to mp4)
• Convert mp4 to Lottie json (Mp4 to Json)
• Upload your Lottie json to lottiefiles.com or add to your assetsfolder
• Use Lottie package to load your animation

尝试从 Medium 查看本教程:“ Explore Lottie Animation In Flutter”。