目录
写在前面
一、什么是 CustomPainter？
CustomPainter 的基本使用
二、Paint 对象的属性
示例：使用 Paint 对象、
三、实现高级自定义动画
1. 动画基本概念
2. 创建一个简单的动画
解析代码
四、创建更复杂的自定义动画
1. 渐变动画
2. 结合路径动画
3. 综合示例：完整代码
写在最后
写在前面
在 Flutter 中，绘图是一项强大的功能，可以帮助开发者创建自定义界面和独特的视觉效果。通过 CustomPainter 和 Canvas，我们可以实现复杂的图形和动画。本文将深入探讨 Flutter 中的画笔使用，包括如何编写高级自定义动画。
一、什么是 CustomPainter？
CustomPainter 是 Flutter 提供的一种用于绘制自定义图形的类。通过继承 CustomPainter，你可以重写 paint 和 shouldRepaint 方法，从而在 Canvas 上绘制任意形状、路径、文本等。
CustomPainter 的基本使用
import 'package:flutter/material.dart';class MyPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Colors.blue..style = PaintingStyle.fill;canvas.drawCircle(Offset(size.width / 2, size.height / 2), 50, paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) => false;
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('CustomPainter 示例')),body: CustomPaint(size: Size(200, 200),painter: MyPainter(),),);}
}
在这个示例中，我们创建了一个自定义画笔 MyPainter，在 Canvas 上绘制了一个蓝色的圆。
二、Paint 对象的属性
Paint 对象是绘制图形的核心。它有多个属性，可以控制绘制的样式和效果：
- color：绘制颜色。
- style：绘制样式，包括填充（
PaintingStyle.fill）和描边（PaintingStyle.stroke）。 - strokeWidth：描边的宽度。
- strokeCap：描边的结束样式，如圆形（
StrokeCap.round）或方形（StrokeCap.square）。 - shader：用于渐变效果的着色器。
示例：使用 Paint 对象、
final paint = Paint()..color = Colors.red..style = PaintingStyle.stroke..strokeWidth = 5;canvas.drawRect(Rect.fromLTWH(50, 50, 100, 100), paint);
在这个示例中，我们使用 Paint 对象绘制了一个红色的矩形，宽度为 5 的描边。
三、实现高级自定义动画
1. 动画基本概念
在 Flutter 中，动画主要通过 Animation 和 AnimationController 实现。AnimationController 控制动画的进度，而 Animation 描述动画的值变化。
2. 创建一个简单的动画
下面是一个使用 CustomPainter 和 AnimationController 创建简单动画的示例：
class AnimatedPainter extends StatefulWidget {@override_AnimatedPainterState createState() => _AnimatedPainterState();
}class _AnimatedPainterState extends State<AnimatedPainter>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(duration: const Duration(seconds: 2),vsync: this,)..repeat(reverse: true);_animation = Tween<double>(begin: 50, end: 100).animate(_controller);}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('动画绘制示例')),body: AnimatedBuilder(animation: _animation,builder: (context, child) {return CustomPaint(size: Size(200, 200),painter: MyAnimatedPainter(radius: _animation.value),);},),);}
}class MyAnimatedPainter extends CustomPainter {final double radius;MyAnimatedPainter({required this.radius});@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..color = Colors.blue..style = PaintingStyle.fill;canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);}@overridebool shouldRepaint(MyAnimatedPainter oldDelegate) => radius != oldDelegate.radius;
}
解析代码
- AnimationController：创建一个持续时间为 2 秒的动画控制器，并设置为循环。
- Tween：定义动画的起始值和结束值（圆的半径）。
- AnimatedBuilder：在动画变化时重建
CustomPaint，以更新绘制的圆的半径。
四、创建更复杂的自定义动画
1. 渐变动画
在动画中引入渐变效果，可以使用 Shader 属性来实现：
class GradientAnimatedPainter extends CustomPainter {final double radius;GradientAnimatedPainter({required this.radius});@overridevoid paint(Canvas canvas, Size size) {final paint = Paint()..shader = RadialGradient(colors: [Colors.red, Colors.blue],stops: [0.5, 1],).createShader(Rect.fromCircle(center: Offset(size.width / 2, size.height / 2), radius: radius));canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);}@overridebool shouldRepaint(GradientAnimatedPainter oldDelegate) => radius != oldDelegate.radius;
}
2. 结合路径动画
结合路径和自定义动画，可以创建更加复杂的效果。例如，沿路径绘制图形：
class PathAnimationPainter extends CustomPainter {final double progress;PathAnimationPainter({required this.progress});@overridevoid paint(Canvas canvas, Size size) {final path = Path()..moveTo(50, 100)..lineTo(150, 100)..lineTo(100, 50)..close();final paint = Paint()..color = Colors.green..style = PaintingStyle.fill;canvas.drawPath(Path.combine(PathOperation.intersect, path, path), paint);canvas.drawCircle(Offset(100 * progress, 50), 5, Paint()..color = Colors.red);}@overridebool shouldRepaint(PathAnimationPainter oldDelegate) => progress != oldDelegate.progress;
}
3. 综合示例：完整代码
将上述所有元素组合成一个完整的例子，创建一个包含路径和渐变动画的画布：
class ComplexAnimationExample extends StatefulWidget {@override_ComplexAnimationExampleState createState() => _ComplexAnimationExampleState();
}class _ComplexAnimationExampleState extends State<ComplexAnimationExample>with SingleTickerProviderStateMixin {late AnimationController _controller;late Animation<double> _animation;@overridevoid initState() {super.initState();_controller = AnimationController(duration: const Duration(seconds: 4),vsync: this,)..repeat(reverse: true);_animation = Tween<double>(begin: 0, end: 1).animate(_controller);}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('复杂动画示例')),body: AnimatedBuilder(animation: _animation,builder: (context, child) {return CustomPaint(size: Size(200, 200),painter: PathAnimationPainter(progress: _animation.value),);},),);}
}
写在最后
在 Flutter 中，CustomPainter 和 Canvas 提供了强大的绘图能力，适合实现各种自定义图形和动画。通过结合 Animation 和 AnimationController，你可以创建平滑且复杂的动画效果。本文介绍了基本的画笔使用、动画控制，以及如何将它们结合实现高级自定义动画的技巧。
希望本篇博客能帮助你更好地理解 Flutter 中的画笔使用与动画创建，开启你的创作之旅！如果你对 Flutter 动画有任何问题或想法，欢迎在评论区讨论！
