svgaplayer_flutter_plus_3 是一个用于在 Flutter 应用中播放 SVG 动画的插件。它基于 SVGA 格式，SVGA 是一种高效的动画格式，特别适合在移动端使用。以下是如何在 Flutter 项目中使用 svgaplayer_flutter_plus_3 插件的步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 svgaplayer_flutter_plus_3 依赖：

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

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

2. 导入包

在需要使用 SVGA 动画的 Dart 文件中导入包：

import 'package:svgaplayer_flutter_plus_3/svgaplayer_flutter_plus_3.dart';

3. 使用 SVGA 动画

你可以使用 SVGAImage 或 SVGASimpleImage 来加载和播放 SVGA 动画。

使用 SVGAImage

SVGAImage 提供了更多的控制选项，比如循环次数、动画完成回调等。

class MySVGAAnimation extends StatefulWidget {
  @override
  _MySVGAAnimationState createState() => _MySVGAAnimationState();
}

class _MySVGAAnimationState extends State<MySVGAAnimation> {
  SVGAAnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = SVGAAnimationController();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVGA Animation'),
      ),
      body: Center(
        child: SVGAImage(
          "https://example.com/path/to/your/animation.svga",
          controller: _controller!,
          onCompleted: () {
            print("Animation completed!");
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller?.start();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

使用 SVGASimpleImage

SVGASimpleImage 是一个更简单的组件，适合不需要复杂控制的场景。

class MySimpleSVGAAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple SVGA Animation'),
      ),
      body: Center(
        child: SVGASimpleImage(
          "https://example.com/path/to/your/animation.svga",
        ),
      ),
    );
  }
}

4. 控制动画

你可以通过 SVGAAnimationController 来控制动画的播放、暂停、停止等操作。

_controller?.start();  // 开始播放
_controller?.pause();  // 暂停播放
_controller?.stop();   // 停止播放
_controller?.reset();  // 重置动画

5. 处理本地文件

如果你有本地的 SVGA 文件，可以使用 AssetBundle 来加载：

SVGAImage.asset(
  "assets/animation.svga",
  controller: _controller!,
);

6. 处理网络文件

如果你需要从网络加载 SVGA 文件，可以直接使用 URL：

SVGAImage.network(
  "https://example.com/path/to/your/animation.svga",
  controller: _controller!,
);

7. 处理动画完成事件

你可以通过 onCompleted 回调来处理动画完成事件：

SVGAImage(
  "https://example.com/path/to/your/animation.svga",
  controller: _controller!,
  onCompleted: () {
    print("Animation completed!");
  },
);

8. 设置循环次数

你可以通过 loops 参数来设置动画的循环次数：

SVGAImage(
  "https://example.com/path/to/your/animation.svga",
  controller: _controller!,
  loops: 3,  // 循环3次
);

9. 设置动画大小

你可以通过 width 和 height 参数来设置动画的大小：

SVGAImage(
  "https://example.com/path/to/your/animation.svga",
  controller: _controller!,
  width: 200,
  height: 200,
);

10. 处理错误

你可以通过 onError 回调来处理加载或播放错误：

SVGAImage(
  "https://example.com/path/to/your/animation.svga",
  controller: _controller!,
  onError: (error) {
    print("Error: $error");
  },
);