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

【问题标题】：how can I make animation in flutter when filling specific (path)?填充特定（路径）时如何制作动画？
【发布时间】：2021-12-27 16:37:06
【问题描述】：

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

【问题讨论】：

检查这个库pub.dev/packages/circular_reveal_animation
@esentis 感谢您提供的信息，但不幸的是它不适合我的情况。这个库正在使用 ClipPath，我正在使用带有 Canvas 的 CusomtPaint。

标签： flutter canvas path paint

【解决方案1】：

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

您的 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();
  }

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

【讨论】：

非常感谢，它有效！！！^_^