Flutter-加载中动画

简介: Flutter-加载中动画

效果

image.png

考察内容

  • AnimationController
  • Tween
  • AnimatedBuilder
  • Transform
  • Matrix4

实现

///源码:https://github.com/yixiaolunhui/flutter_xy
class LoadingView extends StatefulWidget {
  const LoadingView({Key? key}) : super(key: key);

  @override
  State<LoadingView> createState() => _LoadingViewState();
}

class _LoadingViewState extends State<LoadingView>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotationAnimation;
  late Animation<double> _radiusAnimation;
  var size = 160.0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _rotationAnimation = Tween<double>(begin: 0.0, end: pi)
        .chain(CurveTween(curve: Curves.easeInOut))
        .animate(_controller);

    _radiusAnimation = Tween(begin: size / 2, end: 5.0)
        .chain(CurveTween(curve: Curves.easeInOut))
        .animate(_controller);

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _rotationAnimation = Tween<double>(
          begin: _rotationAnimation.value % (2 * pi),
          end: _rotationAnimation.value % (2 * pi) + pi,
        ).chain(CurveTween(curve: Curves.easeInOut)).animate(_controller);
        _radiusAnimation = Tween<double>(
          begin: _radiusAnimation.value == size / 2 ? size / 2 : 5.0,
          end: _radiusAnimation.value == size / 2 ? 5.0 : size / 2,
        ).chain(CurveTween(curve: Curves.easeInOut)).animate(_controller);
        _controller
          ..reset()
          ..forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget? child) {
        return Stack(
          clipBehavior: Clip.none,
          alignment: Alignment.center,
          children: [
            for (var i = 0; i < 5; i++)
              Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                  ..rotateZ(_rotationAnimation.value + i * 0.2),
                child: Container(
                  width: size - i * 30,
                  height: size - i * 30,
                  decoration: BoxDecoration(
                    color: Colors.deepPurple[400 - i * 100],
                    borderRadius: BorderRadius.circular(_radiusAnimation.value),
                  ),
                ),
              ),
          ],
        );
      },
    );
  }
}

使用

///源码:https://github.com/yixiaolunhui/flutter_xy
class LoadingPage extends StatelessWidget {
  const LoadingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("动画"),
      ),
      body: const Center(child: LoadingView()),
    );
  }
}
相关文章
|
1月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
122 5
|
1月前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
80 1
|
2月前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。
|
2月前
|
UED
flutter:动画&状态管理 (十三)
本文档介绍了Flutter中`animatedList`的使用方法和状态管理的示例。`animatedList`用于创建带有动画效果的列表,示例代码展示了如何添加、删除列表项,并执行相应的动画效果。状态管理部分通过一个简单的点击切换颜色的示例,演示了如何在Flutter中管理组件的状态。
|
4月前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
109 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
4月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
146 1
|
5月前
Flutter-实现头像叠加动画效果
Flutter-实现头像叠加动画效果
77 0
|
5月前
Flutter-自定义表情雨下落动画
Flutter-自定义表情雨下落动画
43 0
|
5月前
Flutter-数字切换动画
Flutter-数字切换动画
38 0
|
5月前
|
开发者
Flutter 动画学习
Flutter 动画学习