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

支持本项目

如果 SVGA-Flutter 为您提供了便利与帮助，诚恳建议您通过以下方式支持作者、贡献者持续为该项目发电。

1. 轻点 GitHub Star，让更多人看到该项目。
2. 通过赞赏码（页面底部可见）的方式鼓励作者继续维护代码。

关注作者另外一个开源项目，MPFlutter，使用 Flutter 开发微信小程序。

简介

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

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

更多信息，请访问 网站。

• SVGAPlayer-Flutter 支持 2.0 格式。

使用

这里介绍 SVGAPlayer-Flutter 的使用方法。有关导出使用的详细信息，请点击 这里。

添加依赖

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 中的常规动画一样。将其分配给 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;