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

SVGAPlayer Plus

简介

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

SVGAPlayer-Plus 通过 Flutter CustomPainter 原生渲染动画，为你带来高性能、低成本的动画体验。

如果想了解更多详细信息，请访问这个 网站。

  • SVGAPlayer-Flutter 支持 2.0 格式。

使用

这里介绍 SVGAPlayer-Plus 的使用方法。想知道导出方法？点击 这里。

添加依赖

dependencies:
  svgaplayer_plus: ^2.3.0  #最新版本

定位文件

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_plus/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

在 AnimationController 处置或 AnimationController::videoItem 重置后，MovieEntity 将被处置。

处理后，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 方法来解码缓存数据。

特性

这里有一些功能示例。


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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用svgaplayer_plus插件来播放SVG动画的示例代码。这个插件允许你加载和播放SVGAPlayer的动画文件（.svga格式）。

首先，确保你已经在pubspec.yaml文件中添加了svgaplayer_plus依赖：

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

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

接下来，你可以按照以下步骤在你的Flutter应用中集成SVG动画播放功能。

1. 导入必要的包

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

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

2. 创建一个SVG动画播放器

你可以使用SvgaPlayerController来控制动画的播放，并将其与SvgaPlayer组件结合使用。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SVGAPlayer Plus Example'),
        ),
        body: SvgaPlayerExample(),
      ),
    );
  }
}

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

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

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    _controller = SvgaPlayerController.asset('assets/animation.svga');

    // 监听动画播放完成事件
    _controller.addListener(() {
      if (_controller.value.isCompleted) {
        print('Animation completed!');
        // 这里可以添加动画播放完成后的逻辑，比如重新播放动画
        // _controller.replay();
      }
    });

    // 自动播放动画
    Future.delayed(Duration.zero, () {
      _controller.play();
    });
  }

  @override
  void dispose() {
    // 释放控制器资源
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SvgaPlayer(
        controller: _controller,
        width: 300,
        height: 300,
      ),
    );
  }
}

3. 添加SVG动画文件到资产目录

确保你将.svga文件添加到了项目的assets目录下，并在pubspec.yaml文件中声明这个资产：

flutter:
  assets:
    - assets/animation.svga

4. 运行应用

现在你可以运行你的Flutter应用，应该会看到一个SVG动画在屏幕上播放。

这个示例展示了如何加载和播放一个SVG动画文件，并监听了动画播放完成的事件。你可以根据需要进一步自定义和扩展这个示例，比如添加暂停、继续播放、调整动画速度等功能。

回到顶部