Flutter绘图动画插件drawing_animation的使用

简介

drawing_animation 是一个用于在 Flutter 应用中创建绘制动画效果的插件。它支持从静态 SVG 资源或动态创建的 Path 对象中生成动画。

特点

• 从静态 SVG 资源：支持从简单的 SVG 路径元素中生成动画。
• 从动态创建的 Path 对象：支持从动态创建的 Path 对象中生成动画，并且可以在动画过程中更改这些对象。
• 多种动画效果：支持不同的绘制方式（如同时绘制所有路径或逐个绘制路径）和动画曲线（如线性、弹性、反弹等）。

示例效果

From static SVG assets	Dynamically created from Path objects
	…

快速开始

1. 添加依赖

在你的 pubspec.yaml 文件中添加 drawing_animation 依赖：

dependencies:
  drawing_animation: ^1.0.0

2. 添加 SVG 资源

在 pubspec.yaml 文件中添加你的 SVG 资源文件：

assets:
  - assets/my_drawing.svg

3. 使用 AnimatedDrawing 小部件

3.1 简化版 - 无需动画控制器

默认情况下，每个动画会无限重复。如果你希望动画只运行一次，可以使用回调来设置 run 为 false。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool run = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drawing Animation Example')),
        body: Center(
          child: AnimatedDrawing.svg(
            "assets/my_drawing.svg",
            run: this.run,
            duration: Duration(seconds: 3),
            onFinish: () => setState(() {
              this.run = false;
            }),
          ),
        ),
      ),
    );
  }
}

3.2 标准版 - 使用自定义动画控制器

如果你需要更精细地控制动画或与其他现有动画同步，可以使用自定义的 AnimationController。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

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

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this, duration: Duration(seconds: 3));
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drawing Animation Example')),
        body: Center(
          child: AnimatedDrawing.svg(
            "assets/test.svg",
            controller: this.controller,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (controller.isCompleted) {
              controller.reverse();
            } else {
              controller.forward();
            }
          },
          child: Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

4. 动态创建的 Path 对象

你可以直接提供 Path 对象来创建动画。这些对象可以在动画过程中动态更改。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool run = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Drawing Animation Example')),
        body: Center(
          child: AnimatedDrawing.paths(
            [
              // Path objects
              Path()..addRect(Rect.fromLTWH(50, 50, 100, 100)),
              Path()..addOval(Rect.fromLTWH(200, 200, 100, 100)),
            ],
            paints: [
              Paint()..color = Colors.red..style = PaintingStyle.stroke..strokeWidth = 5,
              Paint()..color = Colors.blue..style = PaintingStyle.stroke..strokeWidth = 5,
            ],
            run: this.run,
            duration: Duration(seconds: 3),
            onFinish: () => setState(() {
              this.run = false;
            }),
          ),
        ),
      ),
    );
  }
}

配置选项

以下是一些常用的配置选项及其视觉效果：

字段	类型	示例
lineAnimation	LineAnimation.oneByOne
lineAnimation	LineAnimation.allAtOnce
animationOrder	PathOrders.original
animationOrder	PathOrders.bottomToTop
animationOrder	PathOrders.decreasingLength
animationOrder	PathOrders.increasingLength
animationOrder	PathOrders.leftToRight
animationOrder	PathOrders.rightToLeft
animationOrder	PathOrders.topToBottom
animationCurve	Curves.linear
animationCurve	Curves.elasticOut
animationCurve	Curves.bounceInOut
animationCurve	Curves.decelerate

支持的 SVG 规范

• 仅支持路径元素：目前只支持 <path> 元素，其他元素（如圆、矩形等）暂不支持。
• 属性：
  • stroke：仅支持十六进制颜色，不支持透明度。
  • stroke-width
  • style：仅支持上述两个字段。
• 不支持变换：目前不支持任何变换操作。

如何使用自己的 SVG 文件？

1. 选择所有对象并取消分组，直到没有分组为止（Ctrl+U）。
2. 将选择转换为路径：Path > Object to Path，然后保存。
3. 使用 svgo 或其在线版本 svgomg 去除变换。
4. 如果仍然有问题，请提交 issue。

示例

• Example_01：使用 AnimatedDrawing.svg 和 AnimatedDrawing.paths 设置简化版动画。
• Example_02：使用自定义动画控制器设置 AnimatedDrawing。
• Example_03：使用英国图书馆提供的旧书扫描矢量化图形的小型艺术展示应用。
• Example_04：展示如何使用 debug 字段创建高分辨率 GIF。

待办事项

• 提高测试覆盖率
• 改进 SVG 解析能力
  • 支持圆、矩形等更多元素
  • 支持更复杂的颜色解析，包括透明度
  • 替换现有的 SVG 解析逻辑，使用成熟的解析库如 flutter_svg
• 提供覆盖 AnimatedDrawing.svg 的颜色/画笔等选项
• 定义一个 PathOrder，保持每个路径并仅相对排序
• 改进 AnimatedDrawing.paths 的性能
• 展示：以不同方式写入 “drawing_animation” 并创建 GIF
• 展示：使用 L-系统创建分形

致谢

感谢 maxwellito 的 vivus 项目为本库提供了初始灵感，感谢 dnfield 的 path_parsing 库。感谢英国图书馆提供的旧书扫描矢量化图形。