Flutter动画SVG插件animated_svg的使用

描述

Flutter 的 animated_svg 包用于显示和动画化可缩放矢量图形1.1（Scalable Vector Graphics 1.1）文件。该包完全用 Dart 编写。

特性

• 强大且完全可定制的 widget。
• 可以轻松地为 SVG 添加动画，使 UI 更加美观。
• AnimatedSvg widget 创建两个指定的 SVG 之间的平滑过渡。

入门指南

第一步：添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  animated_svg: ^2.1.0

第二步：导入 AnimatedSvg

在 Dart 文件中导入 AnimatedSvg 包：

import 'package:animated_svg/animated_svg.dart';

使用方法

基本用法示例

以下是 main.dart 中的基本用法示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated Svg Example')),
        body: Center(child: MyAnimatedSvg()),
      ),
    );
  }
}

class MyAnimatedSvg extends StatefulWidget {
  @override
  _MyAnimatedSvgState createState() => _MyAnimatedSvgState();
}

class _MyAnimatedSvgState extends State<MyAnimatedSvg> {
  // Define an SvgController
  late final SvgController controller;

  @override
  void initState() {
    // Initialize SvgController
    controller = AnimatedSvgController();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    // Call the AnimatedSvg widget anywhere in your widget tree.
    return GestureDetector(
      onTap: () {
        // Toggle between play and pause SVGs
        setState(() {
          controller.toggle();
        });
      },
      child: AnimatedSvg(
        controller: controller,
        duration: const Duration(milliseconds: 600),
        size: 80,
        clockwise: false,
        isActive: true,
        children: [
          SvgPicture.asset(
            'assets/play.svg',
          ),
          SvgPicture.asset(
            'assets/pause.svg',
          ),
        ],
      ),
    );
  }
}

示例项目

更多示例可以在 GitHub 上找到。例如，Media Player 项目展示了如何使用 AnimatedSvg 实现播放器中的播放和暂停按钮之间的平滑过渡。

额外信息

• 该包完全用 Dart 编写，但依赖于 flutter_svg 包。
• 更多信息请访问 GitHub。

功能请求和错误报告

请在 issue tracker 提交功能请求和错误报告。

维护者

• Bulent Baris Kilic

希望以上内容能帮助您更好地理解和使用 animated_svg 插件！如果有任何问题或需要进一步的帮助，请随时提问。