当前位置：首页 > news >正文

flutter 播放SVGA动图

news 来源：原创 2024/5/10 18:39:18

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 {@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动画播放次数和播放完成监听

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;@overridevoid initState() {animationController = SVGAAnimationController(vsync: this);//初始化（可以哪里用加哪里）loadAnimation();super.initState();}@overridevoid 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);}@overrideWidget 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;@overridevoid initState() {animationController = SVGAAnimationController(vsync: this);//初始化（可以哪里用加哪里）loadAnimation();super.initState();}@overridevoid 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){//动画播放完成，进行你自己的操作}});}@overrideWidget 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() {//TODOif (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动画需要占据空间的方式),
),

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