【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
作者 | 弗拉德
来源 | 弗拉德(公众号:fulade_me)
Lottie动画
在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异。
所以为了释放程序员的双手,不再陷入写动画调参数的苦恼,Airbnb开源了一款专门用于跨平台的动画解决方案:Lottie
。
Lottie
可以解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动端和Web端展示。这样我们就可以把做动画的工作交给专业做动画的同事来完成,我们只需要使用导入json文件即可,这样是不是大大减少了程序员的工作量,并且能够:实现专业的人做专业的事。
导入Lottie框架
在Flutter中已经存在开源的Lottie库,所以我们只需要在pubspec.yaml
中的dependencies
导入相关的依赖即可
dependencies:
lottie: ^0.7.0
使用Lottie库
在需要展示Lottie动画Widget导入头文件
import 'package:lottie/lottie.dart';
默认读取本地json文件
Lottie.asset("json/fun_do_like.json"),
只需要一句话即可展示Lottie动画,是不是很简单。
我们来看其他的属性
- repeat 是否重复执行。默认是true,如果是false,动画执行一遍就会停止
- reverse 是否倒序播放。默认是false,如果设置为true,动画会先正序播放一遍,然后再倒序播放一遍
- animate 是否允许播放动画。默认是true,如果设置为false,则不会播放动画
从网络读取json文件
Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",),
同样我们可以设置获取到网络资源后的回调
Lottie.network("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/lottie_test.json",
onLoaded: (LottieComposition composition) {
print("onLoaded");
},
),
好了,关于Lottie
的使用就总结这些了。
想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app
->lib
->routes
->lottie_demo_page.dart
查看,并且可以下载下来运行并体验。
【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画的更多相关文章
- duilib进阶教程 -- 在MFC中使用duilib (1)
由于入门教程的反响还不错,因此Alberl就以直播的形式来写<进阶教程>啦,本教程的前提: 1.请先阅读<仿迅雷播放器教程> 2.要有一定的duilib基础,如果还没,请先阅读 ...
- duilib进阶教程 -- 在duilib中使用MFC (2)
好人做到底,送佛送到西.虽然上一篇教程已经说得很详细了,但Alberl还是再举一个例子.上一篇教程的主窗口是MFC的,所以这篇教程把主窗口换成duilib的~O(∩_∩)O~ 1.我们利用<20 ...
- duilib进阶教程 -- 总结 (17)
整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...
- Flutter免费(视频)教程汇总
Flutter学习导航 Flutter简介: Flutter可以轻松快速地构建漂亮的移动应用程序. Flutter是谷歌的移动应用SDK,用于短时间内在iOS和Android上制作高质量的原生界面应用 ...
- 【Flutter】348- 写给前端工程师的 Flutter 教程
点击上方"前端自习课"关注,学习起来~ | 导语 最爱折腾的就是前端工程师了,从 jQuery 折腾到 AngularJs,再折腾到 Vue.React.最爱跨屏的也是前端工程师, ...
- Flutter从入门到进阶实战携程网App_汇总贴
视频地址:https://coding.imooc.com/class/321.html?mc_marking=60e5294c605a87b2af7257d06f70505e&mc_chan ...
- Flutter开发进阶学习指南Flutter开发进阶学习指南
Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter 诞生于 Chrome 团队的一场内部实验, 谷歌的前端团队在把前端一些"乱七八糟"的规范去掉后,发现在 ...
- Flutter实战:手把手教你写Flutter Plugin
前言 如果你对移动端有所关注,那么你一定会听说过Flutter.得益于Google,Flutter一经推出便得受到了广泛关注.很多开发者跃跃欲试,国内部分大厂,诸如美团.闲鱼等团队已经开始了Flutt ...
- duilib进阶教程 -- Container控件的bug (14)
在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...
随机推荐
- React LifeCycle Methods & re-learning 2019
React LifeCycle Methods & re-learning 2019 v16.9.0 https://reactjs.org/docs/react-component.html ...
- qt char与code的相互转换
QString str = "A"; QChar c = str.at(0); // int v_latin = c.toLatin1(); // 不能转中文 int v_lati ...
- CentOS 7.6.1810 运行pupperteer
故障排除 安装puppeteer,使用cnpm 解决依赖 $ yum -y update $ yum install -y pango libXcomposite libXcursor libXdam ...
- 020_CSS3
目录 如何学习CSS 什么是CSS 发展史 快速入门 css的优势 三种CSS导入方式 拓展:外部样式两种写法 选择器 基本选择器 层次选择器 结构伪类选择器 属性选择器 美化网页元素 为什么要美化网 ...
- now-go时间百宝箱
golang不像C#,Java这种高级语言,有丰富的语法糖供开发者很方便的调用.所以这便催生出很多的开源组件,通过使用这些第三方组件能够帮助我们在开发过程中少踩很多的坑. 时间处理是所有语言都要面对的 ...
- Redis高频面试题总结
通过面试多家大型互联网企业,总结了如下的高频面试题目: 1.redis 过期键的删除策略? (1)定时删除:在设置键的过期时间的同时,创建一个定时器 timer). 让定时器在键的过期时间来临时,立即 ...
- Dokcer中Mysql的数据导入导出
导出 1.首先进入容器,输入提取数据库文件命令 mysqldump -u root -p rw 数据库名> 输出.sql,提取到当前容器 2.退出容器,进入linux:输入拷贝命令 docker ...
- 学习String源码的部分方法
先看构造器: private final char value[]; //char类型的数组 以下均会用到 private int hash; //缓存字符串的哈希值 //以下均会用到 public ...
- Java基础语法:JavaDoc
一.简介 JavaDoc是一种将注释生成HTML文档的技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代码配套的API帮助文档. 也就是说,只要在编写程序时以一套特定的标签作注释,在程序编写 ...
- Django之csrf中间件及auth模块使用
目录 一.基于配置文件的编程思想 1. importlib 模块 2. 配置文件 二.跨站请求伪造(csrf) 1.csrf简介以及由来 2.Django中的csrf中间件如何使用 2.1 普通for ...