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)实现。

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

相关推荐
火柴就是我1 天前
flutter 之真手势冲突处理
android·flutter
Speed1231 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间1 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭1 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone1 天前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
Dabei2 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter