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 的研究还很浅显，有很多方法未研究到；如有错误，请多多指导！
来源： 阿策小和尚
