作者 | 弗拉德

来源 | 弗拉德(公众号: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动画的更多相关文章

  1. duilib进阶教程 -- 在MFC中使用duilib (1)

    由于入门教程的反响还不错,因此Alberl就以直播的形式来写<进阶教程>啦,本教程的前提: 1.请先阅读<仿迅雷播放器教程> 2.要有一定的duilib基础,如果还没,请先阅读 ...

  2. duilib进阶教程 -- 在duilib中使用MFC (2)

    好人做到底,送佛送到西.虽然上一篇教程已经说得很详细了,但Alberl还是再举一个例子.上一篇教程的主窗口是MFC的,所以这篇教程把主窗口换成duilib的~O(∩_∩)O~ 1.我们利用<20 ...

  3. duilib进阶教程 -- 总结 (17)

    整个教程的代码下载:http://download.csdn.net/detail/qq316293804/6502207 (由于duilib进阶教程主要介绍界面,所以这个教程只给出界面相关的代码,完 ...

  4. Flutter免费(视频)教程汇总

    Flutter学习导航 Flutter简介: Flutter可以轻松快速地构建漂亮的移动应用程序. Flutter是谷歌的移动应用SDK,用于短时间内在iOS和Android上制作高质量的原生界面应用 ...

  5. 【Flutter】348- 写给前端工程师的 Flutter 教程

    点击上方"前端自习课"关注,学习起来~ | 导语 最爱折腾的就是前端工程师了,从 jQuery 折腾到 AngularJs,再折腾到 Vue.React.最爱跨屏的也是前端工程师, ...

  6. Flutter从入门到进阶实战携程网App_汇总贴

    视频地址:https://coding.imooc.com/class/321.html?mc_marking=60e5294c605a87b2af7257d06f70505e&mc_chan ...

  7. Flutter开发进阶学习指南Flutter开发进阶学习指南

    Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter 诞生于 Chrome 团队的一场内部实验, 谷歌的前端团队在把前端一些"乱七八糟"的规范去掉后,发现在 ...

  8. Flutter实战:手把手教你写Flutter Plugin

    前言 如果你对移动端有所关注,那么你一定会听说过Flutter.得益于Google,Flutter一经推出便得受到了广泛关注.很多开发者跃跃欲试,国内部分大厂,诸如美团.闲鱼等团队已经开始了Flutt ...

  9. duilib进阶教程 -- Container控件的bug (14)

    在<duilib进阶教程 -- TreeView控件的bug (9)>里,Alberl发现了两个bug,并解决了其中一个,现在教程已经接近尾声啦,所以Alberl就解决了另外一个bug. ...

随机推荐

  1. Flutter 区分开发环境和生产环境

    Uri _baseUrl; final isProd = const bool.fromEnvironment('dart.vm.product'); if (isProd) { _baseUrl = ...

  2. Scrapy 项目:腾讯招聘

    目的: 通过爬取腾讯招聘网站(https://careers.tencent.com/search.html)练习Scrapy框架的使用 步骤: 1.通过抓包确认要抓取的内容是否在当前url地址中,测 ...

  3. 手把手教你Centos7 部署 gitlab社区版

    一.前置说明: 操作系统:Centos 7 物理内存:>=2G 本人亲测,如果安装低版本的gitlab,比如我这里所使用的v8.17.0,物理内存1G,swap 2G虚拟内存即可部署.高版本的所 ...

  4. vue:表单验证时,trigger的值什么时候选blur什么时候选change

    对el-input输入框的验证,trigger的值选blur,即失去焦点时进行验证. 下拉框(el-select).日期选择器(el-date-picker).复选框(el-checkbox).单选框 ...

  5. SpringCloud之服务注册中心

    1.Eureka 1.1RestTemplate 它提供了多种访问远程http服务的方法,是一种简单便捷的访问restful服务模板类,是spring提供的用于访问Rest服务的客户端模板工具集. 1 ...

  6. Python和JavaScript在使用上有什么区别?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.freecodecamp.org/news/python-vs-javas ...

  7. Vue中Jsx的使用

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  8. 双重检验锁模式为什么要使用volatile?

    并发编程情况下有三个要点:操作的原子性.可见性.有序性. volatile保证了可见性和有序性,但是并不能保证原子性. 首先看一下DCL(双重检验锁)的实现: public class Singlet ...

  9. go的循环

    目录 go的循环 一.语法 二.语法简写 1.省略第一部分 2.省略第二部分 3.省略第三部分 4.全省略:死循环 5.终极写法,简洁变形 go的循环 Go中只有for循环,没有while循环.因为w ...

  10. wxWidgets源码分析(5) - 窗口管理

    窗口管理 所有的窗口均继承自wxTopLevelWindows: WXDLLIMPEXP_DATA_CORE(wxWindowList) wxTopLevelWindows; wxTopLevelWi ...