doPaint method

@override void doPaint(PaintingContext context, Offset offset)

Implementation

@override
void doPaint(PaintingContext context, Offset offset) {
  // 可以对动画运用曲线
  Curve curve = Curves.easeIn;
  final _progress = curve.transform(progress);

  Rect rect = offset & size;
  final paint = Paint()
    ..isAntiAlias = true
    ..style = outline ? PaintingStyle.stroke : PaintingStyle.fill //填充
    ..color = color;

  if (outline) {
    paint.strokeWidth = strokeWidth;
    rect = rect.deflate(strokeWidth / 2);
  }

  // 画背景圆
  context.canvas.drawCircle(rect.center, rect.shortestSide / 2, paint);

  paint
    ..style = PaintingStyle.stroke
    ..color = outline ? color : Colors.white
    ..strokeWidth = strokeWidth;

  final path = Path();

  Offset firstOffset =
      Offset(rect.left + rect.width / 6, rect.top + rect.height / 2.1);

  final secondOffset = Offset(
    rect.left + rect.width / 2.5,
    rect.bottom - rect.height / 3.3,
  );

  path.moveTo(firstOffset.dx, firstOffset.dy);

  const adjustProgress = .6;
  //画 "勾"
  if (_progress < adjustProgress) {
    //第一个点到第二个点的连线做动画(第二个点不停的变)
    Offset _secondOffset = Offset.lerp(
      firstOffset,
      secondOffset,
      _progress / adjustProgress,
    )!;
    path.lineTo(_secondOffset.dx, _secondOffset.dy);
  } else {
    //连接第一个点和第二个点
    path.lineTo(secondOffset.dx, secondOffset.dy);
    //第三个点位置随着动画变，做动画
    final lastOffset = Offset(
      rect.right - rect.width / 5,
      rect.top + rect.height / 3.5,
    );
    Offset _lastOffset = Offset.lerp(
      secondOffset,
      lastOffset,
      (progress - adjustProgress) / (1 - adjustProgress),
    )!;
    path.lineTo(_lastOffset.dx, _lastOffset.dy);
  }
  context.canvas.drawPath(path, paint..style = PaintingStyle.stroke);
}