填充特定（路径）时如何制作动画？

Question

我想使用 canvas 和路径在 flutter 中制作这样的动画 example of animation

Answer 1

您需要根据您正在使用的动画值在您的 CustomPainter 中裁剪 canvas。代码如下。没有看到您的代码就很难回答，但这里是如何使用 CustomPaint 完成此操作的框架。 CustomPaint中的canvas可以裁剪成形状，传入动画的进度

您的 CustomPaint 将如下所示：

CustomPaint(
 painter: MyPainter(progress: animation.progress,..

您的 CustomPainter 看起来像这样：

class MyPainter extends CustomPainter {
  final double progress;
  MyPainter({required this.progress...

  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();

    double radius = min(size.width, size.height)/2*progress;
    Offset center = size.center(Offset.zero);
    Rect rect = Rect.fromCircle(center, radius);
    RRect shape = RRect.fromRectAndRadius(rect, radius);
    canvas.clipRRect(shape);
    
    //your painting code here

    canvas.restore();
  }

这应该将您的绘画代码剪辑为圆形。

填充特定（路径）时如何制作动画？

how can I make animation in flutter when filling specific (path)?

canvas

path

paint

flutter