Flutter SVG动画绘制插件 svg_drawing_animation 的使用

svg_drawing_animation 是一个用于在Flutter中实现SVG路径动画绘制的插件。它支持从多种来源加载SVG文件，并提供了丰富的自定义选项，如持续时间、曲线、重复等。

主要功能

• 支持从字符串、网络、资源文件或本地文件加载SVG。
• 支持设置动画的持续时间（Duration）和速度（Speed）。
• 支持自定义动画曲线（Curve）。
• 支持自定义加载状态和错误处理。
• 支持自定义“笔”渲染效果。

示例Demo

以下是完整的示例代码，演示如何使用 svg_drawing_animation 插件进行SVG动画绘制。

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

// 假设kanjiSvg是一个包含SVG字符串的变量
const String kanjiSvg = '''
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 Z" stroke="black" fill="none"/>
</svg>
''';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('SVG Drawing Animation Example')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Card(
                  child: SizedBox(
                    width: 100,
                    height: 100,
                    child: SvgDrawingAnimation(
                      SvgProvider.string(kanjiSvg),
                      duration: const Duration(seconds: 4),
                      repeats: true,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                const Text('Draw the Pen'),
                Card(
                  child: SizedBox(
                    width: 100,
                    height: 100,
                    child: SvgDrawingAnimation(
                      SvgProvider.string(kanjiSvg),
                      duration: const Duration(seconds: 4),
                      repeats: true,
                      penRenderer: CirclePenRenderer(
                        radius: 15,
                        paint: Paint()
                          ..color = Colors.redAccent.withAlpha(128),
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                const Text('Load SVG from URL'),
                Card(
                  child: SizedBox(
                    width: 300,
                    height: 300,
                    child: SvgDrawingAnimation(
                      SvgProvider.network(
                        'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg',
                      ),
                      duration: const Duration(seconds: 10),
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                const Text('Custom controller: tap to replay'),
                const ReplayableCard(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<ReplayableCard> createState() => _ReplayableCardState();
}

class _ReplayableCardState extends State<ReplayableCard>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

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

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        controller.reset();
        controller.forward();
      },
      child: Card(
        child: SizedBox(
          width: 100,
          height: 100,
          child: SvgDrawingAnimation(
            SvgProvider.string(kanjiSvg),
            animation: controller,
          ),
        ),
      ),
    );
  }
}

基本用法

加载并绘制SVG动画的基本用法如下：

SvgDrawingAnimation(
  SvgProvider.network(
    'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg',
  ),
  duration: const Duration(seconds: 10),
)

在容器中适配大小

可以通过 SizedBox 来限制SVG动画的显示区域：

SizedBox(
  width: 300,
  height: 300,
  child: SvgDrawingAnimation(
    SvgProvider.network(
      'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg',
    ),
    duration: const Duration(seconds: 10),
  ),
)

使用曲线和重复动画

你可以为动画添加曲线效果，并设置是否重复：

SvgDrawingAnimation(
  SvgProvider.network(
    'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg',
  ),
  duration: const Duration(seconds: 10),
  curve: Curves.decelerate,
  repeats: true,
)

自定义动画控制器

你还可以使用自己的 AnimationController 来控制动画：

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

  @override
  State<ReplayableCard> createState() => _ReplayableCardState();
}

class _ReplayableCardState extends State<ReplayableCard>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

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

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        controller.reset();
        controller.forward();
      },
      child: Card(
        child: SizedBox(
          width: 100,
          height: 100,
          child: SvgDrawingAnimation(
            SvgProvider.string(kanjiSvg),
            animation: controller,
          ),
        ),
      ),
    );
  }
}

自定义加载和错误处理

你可以自定义加载和错误状态的显示：

SvgDrawingAnimation(
  SvgProvider.network(
    'https://upload.wikimedia.org/wikipedia/commons/4/4a/African_Elephant_SVG.svg',
  ),
  duration: const Duration(seconds: 4),
  loadingWidgetBuilder: (context) => Center(child: LinearProgressIndicator()),
  errorWidgetBuilder: (context) => Text('Oops! Something went wrong.'),
)