写点什么

【Flutter 专题】50 图解动画小插曲之 Lottie 动画

发布于: 2 小时前
【Flutter 专题】50 图解动画小插曲之 Lottie 动画

      小菜在一年前整理过一点 LottieAndroid 中的应用,现在 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 调用

  1. 通过 loadAnimationFromAsset 异步加载本地 json 资源,或通过 loadAnimationFromJson 直接加载 json 内容;


void prepareLottie() async {  var instance = Fluttie();  var whaleLottie = await instance.loadAnimationFromAsset('images/animation_demo01.json');}
复制代码


  1. 设置 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());
复制代码


  1. 开启动画即可准备好动画的基本要素;


setState(() { whaleController.start(); });
复制代码


  1. 将动画绘制在 Widget 即可初步成功;


@overrideWidget build(BuildContext context) {  return Scaffold(      body: Center(          child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[    Container( width: 280.0, height: 200.0,        child: FluttieAnimation(whaleController))    )  ])));}
复制代码


  1. 我们也可以动态监听动画状态并进行处理;


      a. start() 从头开启动画;


      b. pause() 暂停动画;


      c. unpause() 从暂停处继续播放动画;


      d. stopAndReset() 停止动画,rewindtrue 时结束动画并到动画开始时第一帧;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() 动画

      动画对应用内存占用较大,建议在页面销毁或关闭时将动画销毁;


@overridevoid 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(); }); }}
复制代码



      Lottie 动画大大降低了我们的开发成本,且内存状态良好,但并非可以替代原生动画,只是丰富了动画开发的多样性;如有错误请多多指导!


来源:阿策小和尚

发布于: 2 小时前阅读数: 2
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
【Flutter 专题】50 图解动画小插曲之 Lottie 动画