Flutter自定义动画路径插件running_stroke的使用

当然，下面是一个关于如何在Flutter中使用running_stroke插件来自定义动画路径的示例代码。running_stroke插件允许你沿自定义路径绘制动画线条，非常适合创建复杂的动画效果。

首先，确保在你的pubspec.yaml文件中添加running_stroke依赖：

dependencies:
  flutter:
    sdk: flutter
  running_stroke: ^最新版本号 # 请替换为实际可用的最新版本号

然后，运行flutter pub get来安装依赖。

接下来是一个简单的示例代码，展示如何使用running_stroke来沿自定义路径绘制动画线条：

import 'package:flutter/material.dart';
import 'package:running_stroke/running_stroke.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Running Stroke Animation'),
        ),
        body: CustomPathAnimation(),
      ),
    );
  }
}

class CustomPathAnimation extends StatefulWidget {
  @override
  _CustomPathAnimationState createState() => _CustomPathAnimationState();
}

class _CustomPathAnimationState extends State<CustomPathAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(300, 300),
        painter: RunningStrokePainter(
          path: Path()
            ..moveTo(50, 150)
            ..lineTo(250, 150)
            ..quadraticBezierTo(150, 50, 50, 250)
            ..close(),
          strokeColor: Colors.blue,
          strokeWidth: 4.0,
          animation: _animation,
          gap: 10.0,
        ),
      ),
    );
  }
}

class RunningStrokePainter extends CustomPainter {
  final Path path;
  final Color strokeColor;
  final double strokeWidth;
  final Animation<double> animation;
  final double gap;

  RunningStrokePainter({
    required this.path,
    required this.strokeColor,
    required this.strokeWidth,
    required this.animation,
    this.gap = 0.0,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = strokeColor
      ..strokeWidth = strokeWidth
      ..cap = StrokeCap.round
      ..style = PaintingStyle.stroke;

    final PathMeasure measure = PathMeasure(path, false);
    final double length = measure.getLength();
    final double position = animation.value * length;

    final Path dashPath = Path();
    double distance = 0.0;
    if (measure.getTangentForOffset(0.0, null) != null) {
      measure.getSegment(
        0.0,
        position,
        dashPath,
        null,
      );
      distance = measure.getLengthAlongPathTo(position);
    }

    List<Offset> dashOffsets = [];
    for (double i = gap; i < distance; i += gap + strokeWidth) {
      final Tangent? tangent = measure.getTangentForOffset(i - gap / 2);
      if (tangent != null) {
        final Offset offset = tangent.position;
        final double angle = tangent.direction.angle;
        final double dashLength = strokeWidth * 0.9; // Adjust as needed
        final Offset start = offset + Offset(
          cos(angle) * -dashLength / 2,
          sin(angle) * -dashLength / 2,
        );
        final Offset end = offset + Offset(
          cos(angle) * dashLength / 2,
          sin(angle) * dashLength / 2,
        );
        dashOffsets.add(start);
        dashOffsets.add(end);
      }
    }

    if (dashOffsets.isNotEmpty) {
      for (int i = 0; i < dashOffsets.length - 1; i += 2) {
        canvas.drawLine(dashOffsets[i], dashOffsets[i + 1], paint);
      }
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

代码解释

1. 依赖添加：在pubspec.yaml中添加running_stroke依赖。

2. 动画控制：在_CustomPathAnimationState中初始化AnimationController和Animation来控制动画。

3. 自定义Painter：创建RunningStrokePainter类，继承CustomPainter，实现paint方法来自定义绘制逻辑。

4. 路径测量：使用PathMeasure来测量路径长度并获取路径片段。

5. 绘制虚线：根据动画进度和路径片段，绘制虚线动画效果。

这个示例代码展示了如何使用running_stroke插件沿自定义路径绘制动画线条。你可以根据需要调整路径、颜色、动画时长等参数来实现不同的动画效果。