写一个加载时的动画，两个小球转动的样子(假的)
画两个圆点，一个从左到右，从大到小，另一个从右到左，从小到大，执行完一次动画之后反向执行，就这么循环，就有两个圆点立体转圈内味儿了
创建和初始化动画
AnimationController controller; // 动画控制器
Animation<double> animation; // 动画
// 补间(动画）
static final leftScaleTween = new Tween<double>(begin: 12.0, end: 6.0); // 左边小球的大小变化区间
static final rightScaleTween = new Tween<double>(begin: 6.0, end: 12.0); // 右边小球的大小变化区间
static final alignmentTween = new Tween<double>(begin: 10, end: 30); // 位置变化区间
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
animation = new CurvedAnimation(parent: controller, curve: Curves.easeInOut);
animation.addListener((){
setState(() {
});
});
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
// 动画执行结束时反向执行动画
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
// 动画恢复到初始状态时执行动画（正向）
controller.forward();
}
});
controller.forward();
}
加载图UI
Container(
width: MediaQuery.of(context).size.width,
child: Stack(
children: <Widget>[
Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: Image.file(
File(_c.imagePath ?? ""),
fit: BoxFit.cover,
)),
PositionedDirectional(
top: 0,
start: 0,
end: 0,
bottom: 0,
child: Container(
color: Colors.black.withOpacity(0.4),
padding: EdgeInsets.only(bottom: 48),
child: Column(
children: <Widget>[
Expanded(child: Container()),
Column(
children: <Widget>[
Container(
width: 50,
height: 20,
child: Stack(
alignment:Alignment.center ,
children: <Widget>[
Positioned(
left: alignmentTween.evaluate(animation),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50)),
color: Color(0Xff258DFF)
),
width: leftScaleTween.evaluate(animation),
height: leftScaleTween.evaluate(animation),
),
),
Positioned(
right: alignmentTween.evaluate(animation),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(50)),
color: Color(0Xffd8d8d8)
),
width: rightScaleTween.evaluate(animation),
height: rightScaleTween.evaluate(animation),
),
)
],
),
),
SizedBox(height: 15,),
Text(
"稍等哦，帮您努力找款中...",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 15,
),
),
SizedBox(
height: 35,
),
GestureDetector(
onTap: () {
// 停止搜索
setState(() {
_c.isLoading = false;
});
},
child: Image.asset(
"images/cancel.png",
width: 42,
height: 42,
fit: BoxFit.cover,
),
)
],
),
],
),
),
)
],
),
)
这样就OK了
放不了视频，放个效果截图
AC236524-3799-4350-AF08-A93E4BAC4E72_1_102_o.jpeg
image.png
