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

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

SVGAPlayer-Flutter简介

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

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

如果你想要了解更多关于SVGA的信息，可以访问官方网站。

注意：

  • SVGAPlayer-Flutter仅支持2.0格式。

使用方法

添加依赖

在pubspec.yaml中添加以下依赖：

dependencies:
  svgaplayer_flutter: ^2.0.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动画一样使用它。下面是一个完整的示例demo，展示了如何加载和控制动画。

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 {
  late SVGAAnimationController animationController;

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

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

  Future<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()
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SVGA Animation Example')),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            child: SVGAImage(this.animationController),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (animationController.isAnimating) {
              animationController.stop();
            } else {
              animationController.repeat();
            }
          },
          child: Icon(animationController.isAnimating ? Icons.pause : Icons.play_arrow),
        ),
      ),
    );
  }
}

MovieEntity重用

默认情况下，MovieEntity会在AnimationController被销毁或AnimationController::videoItem被重置后自动释放。如果你想重用MovieEntity，请设置MovieEntity::autorelease为false，并在不再需要时手动调用MovieEntity::dispose()方法。

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

缓存

SVGAPlayer不管理任何缓存，你需要使用dio或其他库来处理资源缓存。可以使用SVGAParser.decodeFromBytes方法解码缓存的数据。

功能特性

SVGAPlayer-Flutter提供了许多功能特性，例如：

更多详细信息请参考官方文档。

许可证

SVGAPlayer-Flutter遵循Anti 996许可证。

希望这个回答能帮助你更好地理解和使用svgaplayer_flutter插件。如果有任何问题，欢迎随时提问！


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

1 回复

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


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

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

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

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

接下来，你可以在你的Flutter项目中创建一个简单的页面来播放SVG动画。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SVG Animation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SVGAnimationPage(),
    );
  }
}

class SVGAnimationPage extends StatefulWidget {
  @override
  _SVGAnimationPageState createState() => _SVGAnimationPageState();
}

class _SVGAnimationPageState extends State<SVGAnimationPage> {
  late SVGAPlayerController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化SVGAPlayerController
    _controller = SVGAPlayerController.init();
    // 加载SVGA资源，可以从网络或本地加载
    _controller.loadAsset("assets/animations/sample.svga");
    // 你可以设置自动播放，循环播放等属性
    _controller.setLoopCount(SVGAPlayerLoopCount.loopForever);
    // 开始播放
    _controller.play();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVG Animation Example'),
      ),
      body: Center(
        child: SVGAPlayerView(
          controller: _controller,
          width: 300,  // 设置动画的宽度
          height: 300, // 设置动画的高度
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换播放/暂停状态
          if (_controller.isPlaying) {
            _controller.pause();
          } else {
            _controller.play();
          }
        },
        tooltip: 'Play/Pause',
        child: Icon(
          _controller.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

在上面的代码中，我们做了以下几件事：

  1. 创建一个Flutter应用，并设置主页为SVGAnimationPage。
  2. 在SVGAnimationPage的initState方法中，初始化一个SVGAPlayerController并加载一个本地SVG动画资源（请确保将你的.svga文件放在assets目录下，并在pubspec.yaml中声明它）。
  3. 设置动画为循环播放，并开始播放动画。
  4. 在dispose方法中释放SVGAPlayerController资源。
  5. 在UI中使用SVGAPlayerView来显示动画，并提供一个浮动按钮来切换播放/暂停状态。

请确保你已经将你的.svga文件放置在assets目录下，并在pubspec.yaml中正确声明它，例如：

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

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

回到顶部