电商培训网站,辽宁男科医院排名最好的医院,制作网线,百度搜索seo优化技巧绘制加载动画#xff1a;由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画
我们需要定义两个类#xff1a;LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态#xff0c;而 Load… 绘制加载动画由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画
我们需要定义两个类LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态而 LoadingPainter 则负责绘制动画。
效果展示视频地址https://live.csdn.net/v/417383 资源文件下载地址https://download.csdn.net/download/yang_6799/89639107
1. 定义 LoadingScreen 类
LoadingScreen 类是一个 StatefulWidget它管理 AnimationController 和 Animation 对象。AnimationController 用于控制动画的播放Animation 对象则表示动画的具体值。
import package:flutter/material.dart;
import dart:math;void main() runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(home: LoadingScreen(),);}
}以上代码定义了 MyApp 和 LoadingScreen 两个类其中 MyApp 是应用的入口点而 LoadingScreen 则是主要的动画屏幕。
2. 实现 _LoadingScreenState 类
在 LoadingScreen 类中我们要实现 _LoadingScreenState它是实际负责动画逻辑的地方。
class LoadingScreen extends StatefulWidget {override_LoadingScreenState createState() _LoadingScreenState();
}class _LoadingScreenState extends StateLoadingScreenwith SingleTickerProviderStateMixin {AnimationController? _controller;Animationdouble? _animation;overridevoid initState() {super.initState();_controller AnimationController(vsync: this,duration: Duration(seconds: 3),)..repeat();_animation Tweendouble(begin: 0, end: 1).animate(_controller!);}overridevoid dispose() {_controller?.dispose();super.dispose();}overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.white,body: Center(child: CustomPaint(painter: LoadingPainter(animation: _animation!),child: SizedBox(width: 200.0,height: 200.0,),),),);}
}详解
initState 方法 初始化时创建 AnimationController 并设置动画持续时间为 3 秒。调用 …repeat() 方法让动画重复播放。使用 Tween 创建一个从 0 到 1 的动画并与控制器关联。 dispose 方法 销毁控制器以释放资源。 build 方法 使用 CustomPaint 来绘制自定义内容这里我们指定了 LoadingPainter 作为画笔然后设置了一个 200x200 的 SizedBox 来容纳绘制内容。
3. 定义 LoadingPainter 类
LoadingPainter 类继承自 CustomPainter负责实际绘制每个小圆。我们需要计算每个小圆的位置、大小和透明度以便实现顺时针方向依次从小到大的动画效果。
class LoadingPainter extends CustomPainter {final Animationdouble animation;LoadingPainter({required this.animation}) : super(repaint: animation);overridevoid paint(Canvas canvas, Size size) {double radius size.width / 2;int circleCount 12;double baseCircleRadius 5.0;double maxCircleRadius 15.0;Paint paint Paint()..style PaintingStyle.fill;for (int i 0; i circleCount; i) {double angle (i / circleCount) * 2 * pi;double x radius radius * cos(angle);double y radius radius * sin(angle);// 计算每个小圆在动画中的进度并加入相位偏移double progress (animation.value - i / circleCount) % 1;double scaleFactor (sin(progress * 2 * pi) 1) / 2;double currentRadius baseCircleRadius scaleFactor * (maxCircleRadius - baseCircleRadius);// 确保透明度不低于 0.3double opacity 0.3 0.7 * scaleFactor;paint.color Colors.blue.withOpacity(opacity);canvas.drawCircle(Offset(x, y), currentRadius, paint);}}overridebool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}详解
构造函数 接受一个 Animation 类型参数并调用 super(repaint: animation) 以便在动画值改变时触发重绘。 paint 方法 初始化一些常量包括大圆的半径、小圆的数量以及小圆的最小和最大半径。使用 Paint 进行绘制配置。遍历每个小圆并根据其序号和当前动画进度计算位置和大小。通过 sin 函数计算缩放因子 scaleFactor并使用该因子调整小圆的半径和透明度。最后通过 canvas.drawCircle 在计算出的坐标处绘制每个小圆。
4. 总结
在这篇文章中我们学习了如何使用 Flutter 创建一个加载动画。通过 AnimationController 和 CustomPainter我们可以轻松地实现各种复杂的动画效果。这种加载动画不仅可以提升用户体验还可以让您的应用看起来更加专业。
