flutter 播放SVGA动图

????????SVGAPlayer-Flutter：这是一个轻量级的动画渲染库，可以通过Flutter CustomPainter原生渲染动画，为您带来高性能，低成本的动画体验123。

您可以按照以下步骤使用?SVGAPlayer-Flutter?插件：

1.在?pubspec.yaml?文件中添加以下依赖项：

dependencies:
  svgaplayer_flutter: ^2.2.0

2.在需要使用插件的文件中导入插件：

import 'package:svgaplayer_flutter/svgaplayer_flutter.dart';

?3.在需要播放 SVGA 动画的位置添加?SvgaPlayer?组件：这个是最简单的播放网络图

class MyWidget extends Widget {

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

}

4.播放本地SVGA动画图?

class MyWidget extends Widget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: const SVGASimpleImage(
            assetsName: '本地svga路径',)
    );
  }

}

这里是最简单的播放svga动画，无需其他操作。

SVGASimpleImage属性说明直接看我写的这篇文章就好

地址flutter 播放svga插件SVGAImage属性说明_flutter svga-CSDN博客

这里将一下如何自定义svga尺寸和控制svga动画播放次数和播放完成监听

1.控制svga尺寸，上述的代码会根据svga本身大小来显示，这里如果需要控制他的大小，需要在 SVGA的组件外层加一个父容器即可解决。这样就会生成一个高270.h宽270.h的一个svga动图播放

SizedBox(
                  height: 270.h,
                  width: 270.h,
                  child: SVGASimpleImage(
                      resUrl: list[i].svga_img!),
                )

2.控制svga播放方式，需要替换SVGASimpleImage为SVGAImage，如果想控制他的播放方式需要写一个动画控制器，这里使用的repeat可以一直循环动画播放。

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

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

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

// SingleTickerProviderStateMixin 单个动画  TickerProviderStateMixin多个动画
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  SVGAAnimationController animationController;

  @override
  void initState() {
    animationController = SVGAAnimationController(vsync: this);
    //初始化（可以哪里用加哪里）
    loadAnimation();
    super.initState();
  }

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

  //自定义方法
  void loadAnimation() async {
    //放入网络地址的svga动画
    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() // Try to use .forward() .reverse() 这里是动画方式
        .whenComplete(() => this.animationController.videoItem = null);
  }

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

//动画属性说明一下
enum AnimationStatus {
  /// 动画开始时结束
  dismissed,

  /// 动画开始
  forward,

  /// 逆向动画
  reverse,

  /// 动画完成结束
  completed,
}

this.animationController ?.addStatusListener((status) => print('---status---$status'));

3.如果想播放一遍就停止，并进行你自己的操作，可以这样使用。使用forward

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

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

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

// SingleTickerProviderStateMixin 单个动画  TickerProviderStateMixin多个动画
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  SVGAAnimationController animationController;

  @override
  void initState() {
    animationController = SVGAAnimationController(vsync: this);
    //初始化（可以哪里用加哪里）
    loadAnimation();
    super.initState();
  }

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

  //自定义方法
  void loadAnimation() async {
    //放入网络地址的svga动画
    final videoItem = await SVGAParser.shared.decodeFromURL(
        "https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true");
    this.animationController.videoItem = videoItem;
    this
        .animationController
        .forward() // Try to use .forward() .reverse() 这里是动画方式
        .whenComplete(() => this.animationController.videoItem = null);
    // 监听动画
    animationController.addListener(() {
     if(animationController!.isCompleted){
        //动画播放完成，进行你自己的操作
      }
    });
  }

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

进阶玩法

? ? ? ?如果你一个页面要操作n个动画，使用同一个播放SVGA插件进行播放的时候就需要用到如下方法了。就是每次运行结束后要把动画的监听移除掉，要不然后续运行的时候会走2遍，再次运行可能就是4遍。所以必须要每次使用都要移除一遍，确保使用的这个是最新的这个！

//在需要的地方进行调用即可
void showSVGA(String urlSVGA) async {
    // 动画正在进行中不做处理
    if (animationControllerSL.isAnimating) {
      LogE('进行中====');
    } else {
      final videoItem = await _loadSVGA(true, urlSVGA);
      videoItem.autorelease = false;
      animationControllerSL?.videoItem = videoItem;
      animationControllerSL
          ?.forward() // Try to use .forward() .reverse()
          .whenComplete(() => animationControllerSL?.videoItem = null);
      // 监听动画
      animationControllerSL?.addListener(_animListener);
    }
  }
  void _animListener() {
    //TODO
    if (animationControllerSL.isCompleted) {
      LogE('动画结束 ${DateTime.now()}');
      setState(() {
        // 动画播放到最后一帧时停止播放
        animationControllerSL?.stop();
        //移除动画监听
        animationControllerSL.removeListener(_animListener);
       
      });
    }
  }

//播放svga的组件替换成这个
SizedBox(
   height: double.infinity,
   width: double.infinity,
   child: SVGAImage(
       animationControllerSL,    //动画控制器
       fit: BoxFit.fitHeight, //svga动画需要占据空间的方式
    ),
),

到此，无论是播放本地还是网络地址，修改尺寸，控制播放次数等操作完全可以正常运行使用。