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

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

相关推荐
lqj_本人3 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人6 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔10 小时前
Flutter启动流程(2)
flutter
hello world smile14 小时前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人14 小时前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai14 小时前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人14 小时前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人14 小时前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile16 小时前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓
lqj_本人18 小时前
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
flutter·harmonyos