共计 1380 个字符，预计需要花费 4 分钟才能阅读完成。
谢谢支持原文：http://tryenough.com/flutter-frame-animal
本文是关于如何循环播放一连串的图片，形成动画效果。
看下效果：
你需要做的就是把 UI 提供的一系列图片传入到下列代码中，并设置宽高。
工具类封装：
import ‘package:flutter/material.dart’;
class ImagesAnim extends StatefulWidget {
final Map<int, Image> imageCaches;
final double width;
final double height;
final Color backColor;
ImagesAnim(this.imageCaches, this.width, this.height, this.backColor, {Key key})
: assert(imageCaches != null),
super(key: key);
@override
State<StatefulWidget> createState() {
return new _WOActionImageState();
}
}
class _WOActionImageState extends State<ImagesAnim> {
bool _disposed;
Duration _duration;
int _imageIndex;
Container _container;
@override
void initState() {
super.initState();
_disposed = false;
_duration = Duration(milliseconds: 800);
_imageIndex = 1;
_container = Container(height: widget.height, width: widget.width);
_updateImage();
}
void _updateImage() {
if (_disposed || widget.imageCaches.isEmpty) {
return;
}
setState(() {
if (_imageIndex > widget.imageCaches.length) {
_imageIndex = 1;
}
_container = Container(
color: widget.backColor,
child: widget.imageCaches[_imageIndex],
height: widget.height,
width: widget.width);
_imageIndex++;
});
Future.delayed(_duration, () {
_updateImage();
});
}
@override
void dispose() {
super.dispose();
_disposed = true;
widget.imageCaches.clear();
}
@override
Widget build(BuildContext context) {
return _container;
}
}
谢谢支持原文：http://tryenough.com/flutter-frame-animal
使用：
//imageCaches 是图片 map
Center(
child:ImagesAnim(imageCaches, 100, 150, Colors.transparent),
),
