flutter_svgaplayer3 是一个用于在 Flutter 应用中播放 SVG 动画的插件。它基于 SVGA 格式，这是一种专为动画设计的矢量图形格式，能够高效地播放复杂的动画效果。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_svgaplayer3 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_svgaplayer3: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

1. 导入包

   在你的 Dart 文件中导入 flutter_svgaplayer3 包：

   import 'package:flutter_svgaplayer3/flutter_svgaplayer3.dart';

2. 使用 SVGAImage 组件

   SVGAImage 是 flutter_svgaplayer3 提供的一个组件，用于播放 SVG 动画。你可以通过 asset 或 network 来加载动画文件。

   • 从本地资源加载动画

     SVGAImage.asset(
       'assets/animations/sample.svga',
       width: 200,
       height: 200,
     )

   • 从网络加载动画

     SVGAImage.network(
       'https://example.com/path/to/sample.svga',
       width: 200,
       height: 200,
     )

3. 控制动画播放

   SVGAImage 组件提供了一些方法来控制动画的播放，例如 start()、pause()、stop() 等。

   class MyAnimationWidget extends StatefulWidget {
     [@override](/user/override)
     _MyAnimationWidgetState createState() => _MyAnimationWidgetState();
   }
   
   class _MyAnimationWidgetState extends State<MyAnimationWidget> {
     SVGAAnimationController? _controller;
   
     [@override](/user/override)
     void initState() {
       super.initState();
       _controller = SVGAAnimationController();
     }
   
     [@override](/user/override)
     void dispose() {
       _controller?.dispose();
       super.dispose();
     }
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Column(
         children: [
           SVGAImage.asset(
             'assets/animations/sample.svga',
             width: 200,
             height: 200,
             controller: _controller,
           ),
           ElevatedButton(
             onPressed: () {
               _controller?.start();
             },
             child: Text('Start'),
           ),
           ElevatedButton(
             onPressed: () {
               _controller?.pause();
             },
             child: Text('Pause'),
           ),
           ElevatedButton(
             onPressed: () {
               _controller?.stop();
             },
             child: Text('Stop'),
           ),
         ],
       );
     }
   }

4. 监听动画状态

   你可以通过 SVGAAnimationController 来监听动画的状态，例如动画是否完成。

   _controller?.addListener(() {
     if (_controller?.isCompleted ?? false) {
       print('Animation completed');
     }
   });

高级用法

• 循环播放

  你可以设置动画循环播放：

  _controller?.repeat();

• 设置播放速度

  你可以通过 speed 属性来调整动画的播放速度：

  _controller?.speed = 2.0;  // 2倍速播放

• 自定义动画回调

  你可以通过 onCompleted 回调来处理动画完成后的逻辑：

  SVGAImage.asset(
    'assets/animations/sample.svga',
    width: 200,
    height: 200,
    onCompleted: () {
      print('Animation completed');
    },
  )

注意事项

• SVGA 文件需要从设计工具（如 Adobe Animate、After Effects 等）导出，并转换为 .svga 格式。
• 确保动画文件的路径正确，并且文件已经添加到 pubspec.yaml 的 assets 部分。

示例

以下是一个完整的示例，展示了如何使用 flutter_svgaplayer3 播放 SVG 动画：

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

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

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

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

class _MyAnimationWidgetState extends State<MyAnimationWidget> {
  SVGAAnimationController? _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = SVGAAnimationController();
  }

  [@override](/user/override)
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SVGAImage.asset(
          'assets/animations/sample.svga',
          width: 200,
          height: 200,
          controller: _controller,
          onCompleted: () {
            print('Animation completed');
          },
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                _controller?.start();
              },
              child: Text('Start'),
            ),
            SizedBox(width: 10),
            ElevatedButton(
              onPressed: () {
                _controller?.pause();
              },
              child: Text('Pause'),
            ),
            SizedBox(width: 10),
            ElevatedButton(
              onPressed: () {
                _controller?.stop();
              },
              child: Text('Stop'),
            ),
          ],
        ),
      ],
    );
  }
}