重绘整个画布，甚至在每一帧，都是非常有效的。尝试重用前一帧通常不会更有效率。
查看您发布的代码，有些地方有改进的余地，但尝试保留画布的某些部分不应该是其中之一。
您遇到的真正性能问题是每 50 毫秒重复从 Timer.periodic 事件更改 ValueNotifier。处理每一帧重绘的更好方法是将AnimatedBuilder 与vsync 一起使用，因此将在每一帧上调用CustomPainter 的paint 方法。这类似于网络浏览器世界中的Window.requestAnimationFrame，如果您熟悉的话。如果您熟悉计算机图形的工作原理，这里vsync 代表“垂直同步”。本质上，您的 paint 方法将在具有 60 Hz 屏幕的设备上每秒调用 60 次，并且它会在 120 Hz 屏幕上每秒绘制 120 次。这是在不同类型的设备上实现黄油般流畅动画的正确且可扩展的方式。
在考虑保留部分画布之前，还有其他值得优化的区域。例如，只是简单地看一下你的代码，你有这行：
_currentY = _rng.nextInt(size.height.toInt()).toDouble();
在这里，我假设您希望在 0 和 size.height 之间有一个随机小数，如果是这样，您可以简单地写 _rng.nextDouble() * size.height，而不是将 double 转换为 int 并再次返回，并且（可能是无意的）四舍五入在那个过程中。但是这些东西带来的性能提升是微不足道的。
想一想，如果 3D 视频游戏可以在手机上流畅运行，并且每一帧都与前一帧大不相同，那么您的动画应该可以流畅运行，而不必担心手动清除部分画布。尝试手动优化画布可能会导致性能损失。
因此，您真正应该关注的是使用AnimatedBuilder 而不是Timer 来触发项目中的画布重绘，作为起点。
例如，这是我使用 AnimatedBuilder 和 CustomPaint 制作的一个小演示：
完整源代码：
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
List<SnowFlake> snowflakes = List.generate(100, (index) => SnowFlake());
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat();
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.blue, Colors.lightBlue, Colors.white],
stops: [0, 0.7, 0.95],
),
),
child: AnimatedBuilder(
animation: _controller,
builder: (_, __) {
snowflakes.forEach((snow) => snow.fall());
return CustomPaint(
painter: MyPainter(snowflakes),
);
},
),
),
);
}
}
class MyPainter extends CustomPainter {
final List<SnowFlake> snowflakes;
MyPainter(this.snowflakes);
@override
void paint(Canvas canvas, Size size) {
final w = size.width;
final h = size.height;
final c = size.center(Offset.zero);
final whitePaint = Paint()..color = Colors.white;
canvas.drawCircle(c - Offset(0, -h * 0.165), w / 6, whitePaint);
canvas.drawOval(
Rect.fromCenter(
center: c - Offset(0, -h * 0.35),
width: w * 0.5,
height: w * 0.6,
),
whitePaint);
snowflakes.forEach((snow) =>
canvas.drawCircle(Offset(snow.x, snow.y), snow.radius, whitePaint));
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class SnowFlake {
double x = Random().nextDouble() * 400;
double y = Random().nextDouble() * 800;
double radius = Random().nextDouble() * 2 + 2;
double velocity = Random().nextDouble() * 4 + 2;
SnowFlake();
fall() {
y += velocity;
if (y > 800) {
x = Random().nextDouble() * 400;
y = 10;
radius = Random().nextDouble() * 2 + 2;
velocity = Random().nextDouble() * 4 + 2;
}
}
}
在这里，我生成 100 个雪花，每帧重绘整个屏幕。您可以轻松地将雪花的数量更改为 1000 或更高，并且它仍然会非常流畅地运行。在这里，我也没有尽可能多地使用设备屏幕尺寸，正如你所看到的，有一些硬编码的值，比如 400 或 800。无论如何，希望这个演示能让你对 Flutter 的图形引擎有一些信心。 :)
这是另一个（较小的）示例，向您展示了在 Flutter 中使用 Canvas 和 Animations 所需的一切。可能更容易理解：
import 'package:flutter/material.dart';
void main() {
runApp(DemoWidget());
}
class DemoWidget extends StatefulWidget {
@override
_DemoWidgetState createState() => _DemoWidgetState();
}
class _DemoWidgetState extends State<DemoWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat(reverse: true);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (_, __) => CustomPaint(
painter: MyPainter(_controller.value),
),
);
}
}
class MyPainter extends CustomPainter {
final double value;
MyPainter(this.value);
@override
void paint(Canvas canvas, Size size) {
canvas.drawCircle(
Offset(size.width / 2, size.height / 2),
value * size.shortestSide,
Paint()..color = Colors.blue,
);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}