paint method

  1. @override
void paint(
  1. Canvas canvas,
  2. Path path,
  3. Paint basePaint,
  4. double animationValue,
)
override

Paints the animated connection effect on the canvas.

Parameters:

  • canvas: The canvas to draw on
  • path: The connection path (pre-computed and cached)
  • basePaint: The base paint object with color, stroke width, etc.
  • animationValue: The current animation value (0.0 to 1.0, repeating)

Implementations should use animationValue to create continuous animations. The value continuously cycles from 0.0 to 1.0.

Implementation

@override
void paint(Canvas canvas, Path path, Paint basePaint, double animationValue) {
  // Use sine wave for smooth pulsing (0 to 1 and back)
  final pulseProgress =
      (math.sin((animationValue * speed) * 2 * math.pi) + 1) / 2;

  // Calculate animated opacity
  final opacity = minOpacity + (maxOpacity - minOpacity) * pulseProgress;

  // Calculate animated width
  final width =
      basePaint.strokeWidth +
      (basePaint.strokeWidth * (widthVariation - 1.0) * pulseProgress);

  // Create pulsing paint
  final pulsePaint = Paint()
    ..color = basePaint.color.withValues(alpha: opacity)
    ..strokeWidth = width
    ..style = PaintingStyle.stroke
    ..strokeCap = basePaint.strokeCap
    ..strokeJoin = basePaint.strokeJoin;

  canvas.drawPath(path, pulsePaint);

  // Optional: Add a glow effect at peak pulse
  if (pulseProgress > 0.7 && widthVariation > 1.0) {
    final glowPaint = Paint()
      ..color = basePaint.color.withValues(alpha: opacity * 0.3)
      ..strokeWidth = width * 1.5
      ..style = PaintingStyle.stroke
      ..strokeCap = basePaint.strokeCap
      ..strokeJoin = basePaint.strokeJoin
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 3.0);

    canvas.drawPath(path, glowPaint);
  }
}