Flutter 134: 图解动画小插曲之 SVGA 动画
2021/8/14 8:05:44
本文主要是介绍Flutter 134: 图解动画小插曲之 SVGA 动画,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
小菜之前尝试了 Flare 和 Lottie 动画,实现效果都很高效;今天小菜尝试另一种思路 SVGA 动画;SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式;
SVGA
基本简介
小菜首先赞美一下 SVGA 官网,非常简洁而且主要信息都容易查到,同时看着非常舒服;设计师通过 AE 等工具设计生成好 SVGA 动画后,可直接交付给开发同学通过 SVGAPlayer 直接调用即可,集成和应用都很简单;
SVGA 提供了在线动画素材预览以及素材元素拆分,还可以将 SVGA 动画转化为 SVG 矢量图元素,非常灵活方便;
案例尝试
SVGA 提供了多种方式完整的集成方案,小菜简单尝试一下 Flutter 版本应用;
1. 集成 svgaplayer_flutter
与所有插件使用相同,小菜引入对应版本的 svgaplayer_flutter;目前 svgaplayer_flutter 已支持 Flutter 2.0 空安全;
svgaplayer_flutter: ^2.1.2
2. 应用播放 SVGA
2.1 SVGASimpleImage 加载动画
svgaplayer_flutter 支持播放本地动画和网络线上动画,与 Image 加载本地和网络图片类似;SVGA 提供了封装好 SVGAAnimationController 控制器的 SVGASimpleImage;根据文件类型,通过不同参数进行展示,默认动画效果为重复播放;
class SVGASimpleImage extends StatefulWidget { final String resUrl; final String assetsName; final File file; SVGASimpleImage({Key key, this.resUrl, this.assetsName, this.file}) : super(key: key); @override State<StatefulWidget> createState() => _SVGASimpleImageState(); }
简单分析源码可得,SVGASimpleImage 根据传递的不同动画路径进行不同方式的展示,通过 SVGAParser.shared 加载和解码不同类型的网络资源、本地资源以及 File 资源等;
class _SVGAPageState extends State<SVGAPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('SVGA Page')), body: Column(children: [ _itemSVGA01(false, 'images/posche.svga'), _itemSVGA01(true, 'https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true') ])); } _itemSVGA01(isUrl, svgaUrl) { return Expanded( flex: 1, child: SVGASimpleImage(assetsName: isUrl ? null : svgaUrl, resUrl: isUrl ? svgaUrl : null)); } }
2.2 SVGAImage & SVGAAnimationController
SVGASimpleImage 是将 SVGAImage 和 SVGAAnimationController 封装好的动画播放器,若我们想自由控制动画的播放、暂停、重播等操作的话,需要配合 SVGAAnimationController 控制器调节动画的播放过程;
SVGAImage( this._controller, { this.fit = BoxFit.contain, this.clearsAfterStop = true, })
简单分析源码可得,SVGAImage 主要是通过 SVGAAnimationController 来进行动画播放;与图片类似,可以通过 BoxFit 设置动画的布局样式;
SVGAAnimationController 是对 AnimationController 进一层封装与应用,调用的方法和状态回调基本是一致的;
enum AnimationStatus { /// 动画开始时结束 dismissed, /// 动画开始 forward, /// 逆向动画 reverse, /// 动画完成结束 completed, } this.animationController ?.addStatusListener((status) => print('---status---$status'));
SVGAAnimationController 提供了常用的播放方法,小菜简单尝试几种常用的;
- reset 动画重置;
- forward 动画播放,小菜建议若动画从头开始播放先调用 reset 使动画重置,防止其他操作影响动画起始位置;
- stop 动画停止,与 Lottie 动画不同,SVGAAnimationController 没有提供对应的暂停方法,小菜将 stop 理解为暂停和停止,若继续播放则调用 forward 即可;
- reverse 动画反转,即反向播放动画;
- repeat 动画重复;
- fling 使用临界阻尼弹簧和初始速度驱动动画;小菜简单理解在正向播放时,fling 会按起始速度播放完成;
@override void initState() { super.initState(); this.animationController = SVGAAnimationController(vsync: this) ..addListener(() { if (mounted) { setState(() {}); } }); this._loadAnimation(); } @override void dispose() { this.animationController?.clear(); this.animationController?.dispose(); this.animationController = null; super.dispose(); } void _loadAnimation() async { final videoItem = await _loadSVGA(false, 'images/posche.svga'); if (mounted) setState(() { this.isLoading = false; this.animationController?.videoItem = videoItem; this.animationController ?.addStatusListener((status) => print('---status---$status')); }); } Widget _itemBtn(str) => Expanded( child: Container( margin: EdgeInsets.all(1.0), child: FlatButton( color: Colors.lightBlueAccent, child: Text(str), onPressed: () { if (str == 'start') { animationController?.reset(); animationController?.forward(); } else if (str == 'reverse') { animationController?.reverse(); } else if (str == 'repeat') { animationController?.repeat(); } else if (str == 'resume') { animationController?.forward(); } else if (str == 'stop') { animationController?.stop(); } else if (str == 'fling') { animationController?.fling(); } setState(() {}); })));
SVAG & Lottie
小菜查阅了一些资料,简单了解了 SVGA 与 Lottie 动画实现方式的差异;SVGA 是将 SVGA 矢量图逐帧绘制,通过设置帧率,来生成一个配置文件,使得每一帧都有一个配置,每一帧都是关键帧,通过帧率去刷每一帧的画面,这个思路跟 GIF 很像,但是通过配置使得动画过程中图片都可以得到复用;
而 Lottie 动画是逐层绘制,将所有的动画拆成多个层级,每个层级 layer 都有一个动画配置,播放时解析多 0 个 layer 的配置,并给每个 layer 做相应的动画;
两种动画模式都是很成熟且应用范围很广的动画,小菜因未找到完全相同的动画元素,未能进行准确的数据分析,但查阅资料两者性能基本持平,具体选用哪种根据实际情况而定;
SVGA 案例源码
小菜对 SVGA 的研究还很浅显,有很多方法未研究到;如有错误,请多多指导!
来源: 阿策小和尚
这篇关于Flutter 134: 图解动画小插曲之 SVGA 动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求