Flutter 专题50 图解动画小插曲之 Lottie 动画 #yyds干货盘点# _Flutter

与天地兮比寿，与日月兮齐光。这篇文章主要讲述Flutter 专题50 图解动画小插曲之 Lottie 动画 #yyds干货盘点#相关的知识，希望能为你提供帮助。
小菜在一年前整理过一点 Lottie 在 Android 中的应用，现在 Flutter 也有相关的插件帮助我们快速简单的应用场景复杂的 Lottie 动画；

文章图片

小菜在官网查询之后发现官网推荐了两个开源的 Lottie 插件，小菜对其中的 https://github.com/simolus3/fluttie 进行学习尝试；

文章图片

小菜首先在 lottiefiles 中下载了两个酷炫的动画 json，我们也可以选择合适的动画进行编辑调整；跟原生一样，可以随心设计，当然这项重任还是要交给视觉设计的小姐姐比较好；

文章图片

集成方式
集成方式都是统一的三大步骤；再此之前可以将下载的 json 文件添加到本地 images 资源文件夹中；
1. 在 pubspec.yaml 中添加依赖库

dependencies: fluttie: ^0.3.2

2. 在文件中添加引用库

import package:fluttie/fluttie.dart;

3. 根据 API 调用

通过 loadAnimationFromAsset 异步加载本地 json 资源，或通过 loadAnimationFromJson 直接加载 json 内容；
void prepareLottie() async var instance = Fluttie(); var whaleLottie = await instance.loadAnimationFromAsset(images/animation_demo01.json);
设置 FluttieAnimationController 控制器，绑定动画资源，并设置动画的基本属性；

a. prepareAnimation 的固定参数是动画资源，不可缺少；
b. repeatCount 可设置动画重复的频率；RepeatCount.nTimes(n) 重复 n+1 次；RepeatCount.infinite() 无限循环播放；RepeatCount.dontRepeat() 仅一次，播放完停止；
c. repeatMode 可设置动画播放模式，START_OVER 播放完从头再次播放，REVERSE 从无到有从有到无；
d. duration 可设置动画播放时长；当设置无限重复时不生效；其余根据重复频率使单次动画时长均分；
e. preferredSize 可设置动画预加载大小，并不直接控制 Widget 大小；

whaleController = await instance.prepareAnimation( whaleLottie, repeatCount: const RepeatCount.infinite() );

开启动画即可准备好动画的基本要素；
setState(()whaleController.start(); );
将动画绘制在 Widget 即可初步成功；
@override Widget build(BuildContext context) return Scaffold( body: Center( child: Column(mainAxisSize: MainAxisSize.min, children: < Widget> [ Container( width: 280.0, height: 200.0, child: FluttieAnimation(whaleController)) ) ])));
我们也可以动态监听动画状态并进行处理；

a. start() 从头开启动画；
b. pause() 暂停动画；
c. unpause() 从暂停处继续播放动画；
d. stopAndReset() 停止动画，rewind 为 true 时结束动画并到动画开始时第一帧；false 为技术动画并到动画最后一帧；

Row(children: < Widget> [ Expanded( flex: 1, child: FlatButton( onPressed: ()starController.start(); , child: Text(start))), Expanded( flex: 1, child: FlatButton( onPressed: ()starController.pause(); , child: Text(pause))), Expanded( flex: 1, child: FlatButton( onPressed: ()starController.unpause(); , child: Text(resume))), Expanded( flex: 1, child: FlatButton( onPressed: ()starController.stopAndReset(rewind: true); , child: Text(stop))) ])

文章图片

注意事项
1. dispose() 动画动画对应用内存占用较大，建议在页面销毁或关闭时将动画销毁；

@override void dispose() super.dispose(); whaleController?.dispose(); starController?.dispose();

2. dispose() 与 stopAndReset() 区别 stopAndReset() 方法用来控制动画的停止状态，资源依然存在内存中，之后可继续操作动画的状态；
dispose() 方法用来停止动画并释放资源，之后不能再操作动画状态；

class _LottieStatePage extends State< LottieStatePage> FluttieAnimationController whaleController, starController; @override Widget build(BuildContext context) return Scaffold( body: Center( child: Column(mainAxisSize: MainAxisSize.min, children: < Widget> [ Container( width: 280.0, height: 200.0, child: FluttieAnimation(whaleController)), Container(child: FluttieAnimation(starController)), Row(children: < Widget> [ Expanded( flex: 1, child: FlatButton( onPressed: () starController.start(); , child: Text(start))), Expanded( flex: 1, child: FlatButton( onPressed: () starController.pause(); , child: Text(pause))), Expanded( flex: 1, child: FlatButton( onPressed: () starController.unpause(); , child: Text(resume))), Expanded( flex: 1, child: FlatButton( onPressed: () starController.stopAndReset(rewind: false); , child: Text(stop))) ]) ]))); @override void dispose() super.dispose(); whaleController?.dispose(); starController?.dispose(); @override void initState() super.initState(); prepareLottie(); void prepareLottie() async var instance = Fluttie(); var whaleLottie = await instance.loadAnimationFromAsset(images/animation_demo01.json); whaleController = await instance.prepareAnimation( whaleLottie, repeatCount: const RepeatCount.nTimes(2)); var starLottie = await instance.loadAnimationFromAsset(images/star.json); starController = await instance.prepareAnimation(starLottie, repeatCount: const RepeatCount.infinite(), repeatMode: RepeatMode.START_OVER); setState(() whaleController.start(); starController.start(); );

【Flutter 专题50 图解动画小插曲之 Lottie 动画 #yyds干货盘点#】 Lottie 动画大大降低了我们的开发成本，且内存状态良好，但并非可以替代原生动画，只是丰富了动画开发的多样性；如有错误请多多指导！