Flutter路径动画插件 path_morph 的使用

path_morph 是一个纯 Dart 包，允许您平滑地将一个 Flutter Path 对象变形为另一个。您可以将其视为路径补间动画。其核心思想是取两个路径（源路径和目标路径），并通过平滑移动源路径的点，使其看起来与目标路径完全相同。

使用方法

1. 导入包

首先，在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  path_morph: ^版本号

然后运行 flutter pub get 来安装该包。

2. 示例代码

以下是完整的示例代码，展示了如何使用 path_morph 进行动画变形：

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

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late SampledPathData data;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();

    // 创建两个路径
    Path path1 = createPath1();
    Path path2 = createPath2();

    // 采样路径
    data = PathMorph.samplePaths(path1, path2);

    // 初始化控制器
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    // 生成动画
    PathMorph.generateAnimations(controller, data, func);

    // 添加状态监听器以实现循环播放
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });

    // 开始动画
    controller.forward();
  }

  // 更新路径点的函数
  void func(int i, Offset z) {
    setState(() {
      data.shiftedPoints[i] = z;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Path Morph Demo')),
      body: Center(
        child: CustomPaint(
          painter: MyPainter(PathMorph.generatePath(data)),
          size: const Size(300, 300), // 设置画布大小
        ),
      ),
    );
  }
}

// 自定义绘制类
class MyPainter extends CustomPainter {
  final Path path;
  late Paint myPaint;

  MyPainter(this.path) {
    myPaint = Paint()
      ..color = const Color.fromRGBO(255, 0, 0, 1.0)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPath(path, myPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

// 创建第一个路径
Path createPath1() {
  return Path()
    ..moveTo(60, 200)
    ..lineTo(60, 150)
    ..lineTo(200, 150)
    ..lineTo(200, 200);
}

// 创建第二个路径
Path createPath2() {
  return Path()
    ..moveTo(60, 200)
    ..lineTo(90, 150)
    ..lineTo(150, 100)
    ..lineTo(180, 150)
    ..lineTo(250, 190)
    ..lineTo(250, 250);
}

3. 关键步骤解析

3.1 采样路径

使用 PathMorph.samplePaths() 方法对两个路径进行采样，并返回一个 SampledPathData 对象：

SampledPathData data = PathMorph.samplePaths(path1, path2);

3.2 生成动画

使用 PathMorph.generateAnimations() 方法为路径中的每个点创建动画。该方法需要传入 AnimationController 和 SampledPathData 对象，并且还需要一个回调函数来更新 shiftedPoints 列表：

PathMorph.generateAnimations(controller, data, (i, z) {
  setState(() {
    data.shiftedPoints[i] = z;
  });
});

3.3 渲染变形后的路径

在构建 UI 时，可以调用 PathMorph.generatePath() 方法生成一个新的 Path 对象，并将其传递给自定义绘制器 CustomPainter：

@override
Widget build(BuildContext context) {
  return CustomPaint(painter: MyPainter(PathMorph.generatePath(data)));
}

4. 注意事项

当前，path_morph 包仅支持具有相等轮廓数的两个路径之间的变形。轮廓是指您可以在不抬起笔的情况下绘制的线条。例如，三角形、圆形或正方形的路径只有一个轮廓，而两个同心圆的路径则有两个轮廓。

通过以上步骤，您可以轻松实现路径动画效果。希望这个示例能够帮助您更好地理解和使用 path_morph 插件！