Flutter 实现TickSuccessView进度打勾动画 -- 来自gpt的一篇文章
在APP的开发中，各种动画效果和UI设计都是至关重要的，而在Flutter中，借助精美的Widget和多样化的动画，我们可以轻松实现各种复杂的效果。
这篇博客，我们将会介绍如何使用Flutter实现一个名为TickSuccessView的组件，该组件可以通过UI显示任务是否已完成并提供动画强化效果。
TickSuccessView由三个部分组成：TickSuccessControl（控制类），TickSuccessPainter（绘制类）和TickSuccessView（UI类），它们分别承担着组件的不同职责。
效果图：
效果.gif
首先，我们需要创建TickSuccessControl类，该类用于控制组件的各种属性，包括组件的大小，背景色，完成背景色以及进度圆圈和完成打勾的颜色和动画时长等。
TickSuccessControl类的代码如下所示：
import 'dart:math';
import 'package:flutter/material.dart';
class TickSuccessControl {
AnimationController? animationController;
///是否已完成
bool isSuccess;
///大小
Size size;
///背景色
Color bgColor;
///完成背景色
Color doneBgColor;
///进度圆圈颜色
Color activeColor;
///进度圆圈画笔宽度
double activeWidth;
///进度圆圈开始角度
double activeStartAngle;
///进度圆圈结束角度
double activeEndAngle;
///完成打勾颜色
Color doneColor;
///完成打勾画笔宽度
double doneWidth;
///进度圆圈动画时间
Duration activeDuration;
///完成打勾动画时间
Duration doneDuration;
///是否需要颜色过渡
bool needColorTransition;
TickSuccessControl({
this.isSuccess = false,
this.animationController,
this.size = const Size(20, 20),
this.bgColor = Colors.grey,
this.doneBgColor = Colors.blueAccent,
this.activeColor = Colors.white,
this.doneColor = Colors.white,
this.activeDuration = const Duration(seconds: 1),
this.doneDuration = const Duration(seconds: 1),
this.activeWidth = 1,
this.doneWidth = 2,
this.activeStartAngle = 0,
this.activeEndAngle = pi*3/2,
this.needColorTransition = true
});
updateStatus(bool status){
if (status != isSuccess) {
isSuccess = status;
animationController?.reset();
if (isSuccess) {
animationController?.duration = activeDuration;
animationController?.forward();
}else{
animationController?.duration = doneDuration;
animationController?.repeat();
}
}
}
}
其中最重要的是updateStatus方法，该方法用于更新组件的状态并启动动画。
接下来，我们需要创建TickSuccessPainter类，该类用于绘制组件的UI界面。TickSuccessPainter需要接收到progress、isSuccess、arcColor、tickColor、arcWidth、tickWidth等参数，并根据参数绘制出相应的UI效果。
TickSuccessPainter的代码如下所示：
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
class TickSuccessPainter extends CustomPainter {
//进度 0-1
double progress = 0.0;
bool isSuccess;
///进度圆圈颜色
Color arcColor;
///进度圆圈宽度
double arcWidth;
///进度圆弧开始角度
double arcStartAngle;
///进度圆弧角度
double arcSweepAngle;
///打勾颜色
Color tickColor;
///打勾线条宽度
double tickWidth;
TickSuccessPainter(
this.progress, {
this.isSuccess = false,
this.arcColor = Colors.white,
this.tickColor = Colors.white,
this.arcWidth = 1,
this.tickWidth = 2,
this.arcStartAngle = 0,
this.arcSweepAngle = pi*3/2
});
Paint _paint = new Paint()
..style = PaintingStyle.stroke
..isAntiAlias = true;
Paint _circlePaint = new Paint()
..style = PaintingStyle.stroke
..isAntiAlias = true;
@override
void paint(Canvas canvas, Size size) {
double radius = min(size.width/2, size.height/2);
Offset center = Offset(size.width/2, size.height/2);
if (isSuccess) {
_paint.color = tickColor;
_paint.strokeWidth = tickWidth;
Path startPath = Path();
startPath.moveTo(center.dx-radius/2, center.dy);
startPath.lineTo(center.dx-radius/6, center.dy+radius/2-radius/6);
startPath.lineTo(center.dx+radius/2, center.dy-radius/3);
PathMetrics pathMetrics = startPath.computeMetrics();
PathMetric pathMetric = pathMetrics.first;
Path extrPath = pathMetric.extractPath(0, pathMetric.length * progress);
canvas.drawPath(extrPath, _paint);
}else{
_circlePaint.color = arcColor;
_circlePaint.strokeWidth = arcWidth;
Path arcPath = Path();
arcPath.addArc(Rect.fromCircle(center: center, radius: radius-5), arcStartAngle, arcSweepAngle);
canvas.translate(center.dx, center.dy);
canvas.rotate(pi*2*progress);
canvas.translate(-center.dx, -center.dy);
canvas.drawPath(arcPath, _circlePaint);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
最后，我们需要创建TickSuccessView类，该类是组件的UI部分，需要调用TickSuccessPainter来绘制组件的UI界面，并可以实现属性的控制和操作。TickSuccessView会在组件状态更新时自动触发动画效果。
TickSuccessView的代码如下所示：
import 'dart:math';
import 'package:flutter/material.dart';
import 'tick_success_control.dart';
import 'tick_success_painter.dart';
class TickSuccessView extends StatefulWidget {
TickSuccessControl control;
TickSuccessView({Key? key,
required this.control
}) : super(key: key);
@override
State<TickSuccessView> createState() => _TickSuccessViewState();
}
class _TickSuccessViewState extends State<TickSuccessView> with TickerProviderStateMixin {
late Animation _colorAnimation;
@override
void initState() {
super.initState();
widget.control.animationController = new AnimationController(
vsync: this, duration: widget.control.activeDuration);
_colorAnimation = ColorTween(begin: widget.control.bgColor, end: widget.control.doneBgColor)
.animate(widget.control.animationController!);
widget.control.animationController!.repeat();
}
@override
void dispose() {
// TODO: implement dispose
widget.control.animationController?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: widget.control.animationController!.view,
builder: (context,child) {
return Container(
width: widget.control.size.width,
height: widget.control.size.height,
decoration: BoxDecoration(
color: widget.control.isSuccess?
(widget.control.needColorTransition?
_colorAnimation.value:widget.control.doneBgColor):widget.control.bgColor,
borderRadius: BorderRadius.circular(min(widget.control.size.width/2, widget.control.size.height/2))
),
child: CustomPaint(
painter: TickSuccessPainter(
widget.control.animationController!.value,
isSuccess: widget.control.isSuccess,
arcColor: widget.control.activeColor,
arcWidth: widget.control.activeWidth,
arcStartAngle: widget.control.activeStartAngle,
arcSweepAngle: widget.control.activeEndAngle,
tickColor: widget.control.doneColor,
tickWidth: widget.control.doneWidth
),
),
);
}
);
}
}
至此，TickSuccessView的实现就完成了。需要注意的是，使用该组件时，需要在外部调用updateStatus方法，通过布尔型参数来更新组件的状态，从而实现UI效果和相关动画的展示。
总结：
本文介绍了如何使用Flutter实现一个名为TickSuccessView的组件，并提供了其三个重要的组成部分：TickSuccessControl、TickSuccessPainter和TickSuccessView。通过本文的示例代码，我们可以深入理解Flutter组件开发的流程和技巧，为我们日后的Flutter开发提供参考和借鉴。
网友评论