flutter开发实战-旋转loading指示器

flutter开发实战-旋转loading指示器。

在这里插入图片描述

一、交织动画

有些时候我们可能会需要一些复杂的动画，这些动画可能由一个动画序列或重叠的动画组成。一个动画组合在不同阶段包含了多种动画，要实现这种效果，需要使用交织动画（Stagger Animation）实现会比较方法。

二、实现旋转loading指示器

实现旋转loading指示器代码

// 旋转loading指示器
class CustomLoadingIndicator extends StatefulWidget {
const CustomLoadingIndicator({Key? key}) : super(key: key);

@override
State createState() => _CustomLoadingIndicatorState();
}

class _CustomLoadingIndicatorState extends State with TickerProviderStateMixin {

late AnimationController _animationController;
late Animation _animation;
bool _disposed = false;

@override
void initState() {
// TODO: implement initState
super.initState();
_disposed = false;

startAnimation();

}

void startAnimation() {
if (_disposed == true) {
return;
}

_animationController =
    AnimationController(vsync: this, duration: Duration(milliseconds: 500));

_animation =
    CurvedAnimation(parent: _animationController, curve: Curves.linear);
_animation = Tween(begin: 0.0, end: 2*pi).animate(_animation);

_animationController.addListener(() {
  if (mounted) {
    setState(() {});
  }
});

_animationController.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    startAnimation();
  }
});

_animationController.forward();

}

@override
void dispose() {
// TODO: implement dispose
_disposed = true;
_animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Container(
width: 60,
height: 60,
color: Colors.transparent,
alignment: Alignment.center,
child: Transform.rotate(
//旋转90度
angle:_animation.value,
child: _buildLoadingWidget(context),
),
);
}

Widget _buildLoadingWidget(BuildContext context) {
return ImageHelper.wrapAssetAtImages(
“icons/ic_toast_loading.png”,
width: 50.0,
height: 50.0,
);
}
}

三、小结

flutter开发实战-旋转loading指示器，使用交织动画（Stagger Animation）实现。

学习记录，每天不停进步。