共计 1526 个字符,预计需要花费 4 分钟才能阅读完成。
请支持原文:http://tryenough.com/images-animation
效果如下图:
代码
import 'package:flutter/material.dart';
import 'package:sprintf/sprintf.dart'; // 这个是一个拼接字符串的 flutter 库,主要是为了使用方便,你可以选择不使用,这样的话你需要自己拼接图片路径
class ImagesAnimation extends StatefulWidget {
final double w;
final double h;
final ImagesAnimationEntry entry;
final int durationSeconds;
ImagesAnimation({Key key, this.w : 80, this.h : 80, this.entry, this.durationSeconds : 3}):super(key:key);
@override
_InState createState() {return _InState();
}
}
class _InState extends State<ImagesAnimation> with TickerProviderStateMixin{
AnimationController _controller;
Animation<int> _animation;
@override
void initState() {super.initState();
_controller = new AnimationController(vsync: this, duration: Duration(seconds: widget.durationSeconds))
..repeat();
_animation = new IntTween(begin: widget.entry.lowIndex, end: widget.entry.highIndex).animate(_controller);
//widget.entry.lowIndex 表示从第几下标开始,如 0;widget.entry.highIndex 表示最大下标:如 7
}
@override
Widget build(BuildContext context) {
return new AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget child) {String frame = _animation.value.toString();
return new Image.asset(sprintf(widget.entry.basePath, [frame]), // 根据传进来的参数拼接路径
gaplessPlayback: true, // 避免图片闪烁
width: widget.w,
height: widget.h,
);
},
);
}
}
class ImagesAnimationEntry {
int lowIndex = 0;
int highIndex = 0;
String basePath;
ImagesAnimationEntry(this.lowIndex, this.highIndex, this.basePath);
}
请支持原文:http://tryenough.com/images-animation
使用的地方:
ImagesAnimation(w: 100, h: 100, entry: ImagesAnimationEntry(1, 7, "images/men_sport_%s.png")),
//"images/men_sport_%s.png" 表示图片在你本地的路径,%s 会被下标代替
正文完