Flutter SVG动画播放插件svgaplayer_3的使用

SVGAPlayer-Flutter

简介

SVGAPlayer 是一个轻量级的动画渲染器。您可以使用工具从 Adobe Animate CC 或 Adobe After Effects 导出 svga 文件，然后在移动应用程序中使用 SVGAPlayer 渲染动画。

SVGAPlayer-Flutter 通过 Flutter CustomPainter 原生渲染动画，为您提供高性能且低成本的动画体验。

如需更多信息，请访问此 网站。

  • SVGAPlayer-Flutter 仅支持 2.0 格式。

使用

以下是 SVGAPlayer-Flutter 的使用说明。有关导出使用的详细信息，请点击 这里。

添加依赖

dependencies:
  svgaplayer_3: ^3.0.1  #最新版本

定位文件

SVGAPlayer 可以从 Flutter 本地 assets 目录或远程服务器加载 svga 文件。请自行添加文件到 pubspec.yaml 中。

极简使用

渲染动画最简单的方法是使用 SVGASimpleImage 组件。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SVGASimpleImage(
          resUrl: "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true"),
    );
  }
}

动画将循环播放。如果您希望有更多的动画控制，请使用代码。

代码使用

要控制动画渲染，您需要创建一个 SVGAAnimationController 实例，就像 Flutter 常规动画一样。将其分配给 SVGAImage，使用 SVGAParser 加载和解码资源，然后使用 SVGAAnimationController 进行操作。

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

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

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  SVGAAnimationController animationController;

  @override
  void initState() {
    this.animationController = SVGAAnimationController(vsync: this);
    this.loadAnimation();
    super.initState();
  }

  @override
  void dispose() {
    this.animationController.dispose();
    super.dispose();
  }

  void loadAnimation() async {
    final videoItem = await SVGAParser.shared.decodeFromURL(
        "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
    this.animationController.videoItem = videoItem;
    this
        .animationController
        .repeat() // 尝试使用 .forward() .reverse()
        .whenComplete(() => this.animationController.videoItem = null);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: SVGAImage(this.animationController),
    );
  }
}

重用 MovieEntity

MovieEntity 在 AnimationController 销毁或 AnimationController::videoItem 重置后会被销毁。

销毁后，MovieEntity 无法重复使用。

如果您希望重复使用 MovieEntity，请将 MovieEntity::autorelease 设置为 false。

final videoItem = await SVGAParser.shared.decodeFromURL(
        "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
videoItem.autorelease = false;

当不再需要时，您需要调用 MovieEntity::dispose() 方法。

缓存

我们不会管理任何缓存，您需要使用 dio 或其他库来处理资源缓存。

使用 SVGAParser.decodeFromBytes 方法来解码缓存数据。


## 特性

以下是一些功能示例。

- [动态图像替换](https://github.com/yyued/SVGAPlayer-Flutter/wiki/Dynamic-Image)
- [在元素上方添加文本](https://github.com/yyued/SVGAPlayer-Flutter/wiki/Dynamic-Text)
- [动态隐藏元素](https://github.com/yyued/SVGAPlayer-Flutter/wiki/Dynamic-Hidden)
- [自定义元素抽屉](https://github.com/yyued/SVGAPlayer-Flutter/wiki/Dynamic-Drawer)

## 许可证

[反996许可证](https://github.com/bear3z/SVGAPlayer-Flutter/blob/master/LICENSE)

更多关于Flutter SVG动画播放插件svgaplayer_3的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter SVG动画播放插件svgaplayer_3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用svgaplayer_3插件来播放SVG动画的示例代码。svgaplayer_3是一个流行的Flutter插件，用于播放SVG格式的动画。

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

dependencies:
  flutter:
    sdk: flutter
  svgaplayer_flutter_3: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用SvgaPlayer组件来播放SVG动画。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SVG动画播放示例'),
        ),
        body: Center(
          child: SvgaPlayerExample(),
        ),
      ),
    );
  }
}

class SvgaPlayerExample extends StatefulWidget {
  @override
  _SvgaPlayerExampleState createState() => _SvgaPlayerExampleState();
}

class _SvgaPlayerExampleState extends State<SvgaPlayerExample> {
  late SvgaPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SvgaPlayerController();
    // 加载SVG动画文件，可以是从本地资源或网络加载
    _controller.loadAsset("assets/animations/example.svga");
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 显示SVG动画播放器
        SvgaPlayer(
          controller: _controller,
          width: 300,  // 设置宽度
          height: 300, // 设置高度
        ),
        SizedBox(height: 20),
        // 播放和暂停按钮
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                _controller.play();
              },
              child: Text('播放'),
            ),
            SizedBox(width: 20),
            ElevatedButton(
              onPressed: () {
                _controller.pause();
              },
              child: Text('暂停'),
            ),
          ],
        ),
      ],
    );
  }
}

在这个示例中：

  1. SvgaPlayerController 用于控制SVG动画的播放。
  2. 在initState方法中，我们初始化了_controller并加载了一个本地SVG动画文件（确保你已经将SVG动画文件放在了assets/animations/目录下，并在pubspec.yaml中声明了这个资源）。
  3. SvgaPlayer 组件用于显示SVG动画。
  4. 提供了两个按钮用于播放和暂停动画。

请确保你的SVG动画文件路径正确，并且已经在pubspec.yaml中声明了资源路径，例如：

flutter:
  assets:
    - assets/animations/example.svga

这样，你就可以在Flutter应用中播放SVG动画了。

回到顶部