如何在Flutter中使用CustomPainter实现多偏移点线条动画？

问题梳理 #

• 当前实现逻辑：通过动画补间过渡到新点，用索引跟踪绘制进度，CustomPainter中分为两条线绘制——已完成的固定路径、正在动画过渡的线段
• 现存UI问题：添加新点后角落出现填充异常
• 未完成需求：未成功实现FlutterForward视频（14:40处）中的TweenSequence方案

修复角落填充异常 #

角落填充问题基本是因为已完成路径和动画线段的端点样式不统一、路径衔接逻辑冲突导致，可通过以下方式调整：

1. 统一线条样式参数：确保已完成路径和动画线段的strokeCap、strokeWidth完全一致，比如都设置为StrokeCap.round或StrokeCap.square，避免不同端点样式衔接时出现空隙或重叠填充。
2. 优化已完成路径构建方式：不要循环调用drawLine分段绘制已完成路径，而是将所有已完成点一次性加入Path对象，再用canvas.drawPath()绘制，保证路径连续性：

   // 正确构建已完成路径的代码示例
   Path completedPath = Path();
   if (completedPoints.length >= 2) {
     completedPath.moveTo(completedPoints[0].dx, completedPoints[0].dy);
     for (int i = 1; i < completedPoints.length; i++) {
       completedPath.lineTo(completedPoints[i].dx, completedPoints[i].dy);
     }
   }
   canvas.drawPath(completedPath, completedPaint);
   

3. 精准控制动画线段范围：动画线段仅需从已完成的最后一个点，补间到当前目标点，确保起点是固定的已完成点，终点为补间后的偏移量，不要包含前面的路径段。

实现TweenSequence方案 #

TweenSequence可实现多段连续动画，无需手动维护索引，具体步骤如下：

1. 准备目标点列表：将所有需要绘制的偏移点存入List<Offset> points。
2. 生成TweenSequence：遍历点列表，创建对应每段点过渡的TweenSequenceItem，设置相对时长权重：

   TweenSequence<Offset> createTweenSequence(List<Offset> points) {
     List<TweenSequenceItem<Offset>> items = [];
     for (int i = 0; i < points.length - 1; i++) {
       items.add(TweenSequenceItem(
         tween: Tween<Offset>(begin: points[i], end: points[i+1]),
         weight: 1.0, // 权重控制每段动画的相对时长，可按需调整
       ));
     }
     return TweenSequence(items);
   }
   

3. 绑定动画控制器：将TweenSequence与AnimationController绑定，监听动画更新触发CustomPainter重绘。
4. 绘制动态路径：根据动画当前值构建路径——先绘制已完成的前序固定路径，再绘制当前过渡段的动画线段：

   @override
   void paint(Canvas canvas, Size size) {
     Path path = Path();
     if (points.isEmpty) return;
     path.moveTo(points[0].dx, points[0].dy);
     // 获取当前动画对应的偏移量
     Offset currentOffset = animation.value;
     // 确定当前动画处于哪一段，绘制前序完整路径
     int currentSegment = (animation.value * (points.length - 1)).floor();
     for (int i = 1; i <= currentSegment; i++) {
       path.lineTo(points[i].dx, points[i].dy);
     }
     // 绘制当前过渡段的动画线段
     if (currentSegment < points.length - 1) {
       path.lineTo(currentOffset.dx, currentOffset.dy);
     }
     canvas.drawPath(path, paint);
   }
   

额外注意事项 #

• 动画控制器的duration需设置为所有段时长的总和，例如每段过渡1秒，n个点则设置为Duration(seconds: n-1)。
• 如需重复动画，可设置动画控制器的repeat属性，或在动画结束后重置并重新启动。

内容的提问来源于stack exchange，提问作者Kdon