SVGAPlayer-Flutter
程序员文章站
2022-05-04 07:49:52
...
SVGAPlayer-Flutter
介绍
SVGAPlayer
是一个轻量的动画渲染库。你可以使用工具从 Adobe Animate CC
或者 Adobe After Effects
中导出动画文件,然后使用 SVGAPlayer
在移动设备上渲染并播放。
SVGAPlayer-Flutter
通过 Flutter CustomPainter 原生渲染动画,为您带来高性能,低成本的动画体验。
如果你想要了解更多细节,请访问官方网站。
- SVGAPlayer-Flutter 只支持 2.0 版本格式.
用法
我们在这里介绍 SVGAPlayer-Flutter
的用法。想要知道如何导出动画,点击这里。
添加依赖
dependencies:
svgaplayer_flutter: ^1.0.0 #latest version
放置 svga 文件
SVGAPlayer 可以从本地 assets
目录,或者远端服务器上加载动画文件。
简易用法
使用 SVGASimpleImage
组件进行动画渲染是最简单的。
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"),
);
}
}
动画将会循环播放,如果你希望更直接地控制动画,可以使用代码方式。
使用代码
为了控制动画的渲染操作,你需要创建一个 SVGAAnimationController
实例,这和普通的 Flutter 动画并没有什么区别。将这个实例赋予 SVGAImage
,使用 SVGAParser
加载并解码资源,然后使用 Controller 播放动画。
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() // Try to use .forward() .reverse()
.whenComplete(() => this.animationController.videoItem = null);
}
@override
Widget build(BuildContext context) {
return Container(
child: SVGAImage(this.animationController),
);
}
}
缓存
动画库不会管理任何缓存,你需要使用 dio
等网络库自行处理。
使用 SVGAParser.decodeFromBytes
方法解码数据。
功能示例
上一篇: idea maven下载依赖失败
推荐阅读