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遍。所以必须要每次使用都要移除一遍，确保使用的这个是最新的这个！文章来源：https://www.toymoban.com/news/detail-808367.html
//在需要的地方进行调用即可
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动画需要占据空间的方式
),
),到此，无论是播放本地还是网络地址，修改尺寸，控制播放次数等操作完全可以正常运行使用。文章来源地址https://www.toymoban.com/news/detail-808367.html
到了这里，关于flutter 播放SVGA动图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
