????????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?組件：這個是最簡單的播放網(wǎng)絡圖

class MyWidget extends Widget {@overrideWidget 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 {@overrideWidget build(BuildContext context) {return Container(child: const SVGASimpleImage(assetsName: '本地svga路徑',));}}

這里是最簡單的播放svga動畫，無需其他操作。

SVGASimpleImage屬性說明直接看我寫的這篇文章就好

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

這里將一下如何自定義svga尺寸和控制svga動畫播放次數(shù)和播放完成監(jiān)聽

1.控制svga尺寸，上述的代碼會根據(jù)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可以一直循環(huán)動畫播放。

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;@overridevoid initState() {animationController = SVGAAnimationController(vsync: this);//初始化（可以哪里用加哪里）loadAnimation();super.initState();}@overridevoid dispose() {animationController.dispose();super.dispose();}//自定義方法void loadAnimation() async {//放入網(wǎng)絡地址的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);}@overrideWidget build(BuildContext context) {return Container(child: SVGAImage(this.animationController),);}
}//動畫屬性說明一下
enum AnimationStatus {/// 動畫開始時結(jié)束dismissed,/// 動畫開始forward,/// 逆向動畫reverse,/// 動畫完成結(jié)束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;@overridevoid initState() {animationController = SVGAAnimationController(vsync: this);//初始化（可以哪里用加哪里）loadAnimation();super.initState();}@overridevoid dispose() {animationController.dispose();super.dispose();}//自定義方法void loadAnimation() async {//放入網(wǎng)絡地址的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);// 監(jiān)聽動畫animationController.addListener(() {if(animationController!.isCompleted){//動畫播放完成，進行你自己的操作}});}@overrideWidget build(BuildContext context) {return Container(child: SVGAImage(this.animationController),);}
}

進階玩法

? ? ? ?如果你一個頁面要操作n個動畫，使用同一個播放SVGA插件進行播放的時候就需要用到如下方法了。就是每次運行結(jié)束后要把動畫的監(jiān)聽移除掉，要不然后續(xù)運行的時候會走2遍，再次運行可能就是4遍。所以必須要每次使用都要移除一遍，確保使用的這個是最新的這個！

//在需要的地方進行調(diào)用即可
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);// 監(jiān)聽動畫animationControllerSL?.addListener(_animListener);}}void _animListener() {//TODOif (animationControllerSL.isCompleted) {LogE('動畫結(jié)束 ${DateTime.now()}');setState(() {// 動畫播放到最后一幀時停止播放animationControllerSL?.stop();//移除動畫監(jiān)聽animationControllerSL.removeListener(_animListener);});}}//播放svga的組件替換成這個
SizedBox(height: double.infinity,width: double.infinity,child: SVGAImage(animationControllerSL,    //動畫控制器fit: BoxFit.fitHeight, //svga動畫需要占據(jù)空間的方式),
),

到此，無論是播放本地還是網(wǎng)絡地址，修改尺寸，控制播放次數(shù)等操作完全可以正常運行使用。