Flutter动画效果插件dart_flubber的使用

dart_flubber

dart_flubber 是一个用于在 Dart 中进行开闭线条线性插值的工具。其封闭线条的代码基于 flubber 包，因此得名。此外，还有一个 Python 版本可以在 这里 找到。

使用方法

安装依赖

首先，在 pubspec.yaml 文件中添加 dart_flubber 作为依赖项：

dependencies:
  dart_flubber: ^0.1.0

然后运行以下命令以获取依赖项：

flutter pub get

示例代码

以下是一个完整的示例，展示如何使用 dart_flubber 插值两个形状。

代码示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('dart_flubber 示例')),
        body: Center(
          child: FlubberAnimation(),
        ),
      ),
    );
  }
}

class FlubberAnimation extends StatefulWidget {
  [@override](/user/override)
  _FlubberAnimationState createState() => _FlubberAnimationState();
}

class _FlubberAnimationState extends State<FlubberAnimation> {
  List<Point<double>> first = [
    Point(50, 50),
    Point(100, 50),
    Point(100, 100),
    Point(50, 100)
  ];

  List<Point<double>> second = [
    Point(150, 50),
    Point(200, 50),
    Point(200, 100),
    Point(150, 100)
  ];

  double progress = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: AnimationController(
        vsync: this,
        duration: Duration(seconds: 2),
        value: progress,
        lowerBound: 0.0,
        upperBound: 1.0,
      )..addListener(() {
          setState(() {
            progress = this.progress + 0.01;
            if (progress > 1.0) {
              progress = 0.0; // 循环播放
            }
          });
        }),
      builder: (context, child) {
        final interpolatedPoints =
            interpolate(first, second, progress, closed: true);

        return CustomPaint(
          painter: FlubberPainter(interpolatedPoints),
          size: Size(300, 300),
        );
      },
    );
  }
}

class FlubberPainter extends CustomPainter {
  final List<Point<double>> points;

  FlubberPainter(this.points);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;

    Path path = Path();

    if (points.isNotEmpty) {
      path.moveTo(points[0].x.toDouble(), points[0].y.toDouble());

      for (var point in points.sublist(1)) {
        path.lineTo(point.x.toDouble(), point.y.toDouble());
      }

      path.close(); // 封闭路径
    }

    canvas.drawPath(path, paint);
  }

  [@override](/user/override)
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}