ios html下拉刷新,Lottie_ios 实现下拉刷新

一. Lottie 是什么

首先这个库是做什么的？

通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成一个 json 文件，Lottie 实现了 Android/iOS/React Native 三个平台对该 json 文件的解析和渲染。

可能看到这里你该有疑问了，那 Bodymovin 插件从何而来？

bodymovin从项目介绍上看是一个个人库，它的主要功能是将 AE 导出的动画在 Web 端执行。所以 Airbnb 做的主要工作是将该项目扩展到移动端。

二. 优点

它最大的优点是提供了一套完整的跨平台的动画实现工作流。

试想一下，以往要实现一个动画，我们需要多端各自实现且动画的复杂度受时间成本和开发者能力的约束。现在，通过这套流程我们可以将 AE 中的动画很轻松得在 web 端、移动端显示出来，这大大提高了动画的开发效率及减轻工作量。

其次，相对于类似的实现方案GIF、手写动画、帧动画而言，这个方案更为轻量，性能和存储上都更佳

从代码上看，Android 端的实现是基于 Drawable、iOS 端是基于 Layer —— 最终都是对 canvas 的操作，中间除去解析 json 外，基本无耗费性能的行为。(官方文档有提到，masks 和 mattes 动画较为耗费性能，原因是需要额外的 Bitmap 辅助，这点需注意)

而存储上，动画由 json 文件描述，占用空间不多。

三. 适用场景

1.启动(splash)动画：典型场景是APP logo动画的播放

2.上下拉刷新动画：所有APP都必备的功能，利用 Lottie 可以做的更加简单酷炫了

3.加载(loading)动画：典型场景是网络请求的loading动画

4.提示(tips)动画：典型场景是空白页的提示

5.按钮(button)动画：典型场景如switch按钮、编辑按钮、播放按钮等按钮的切换过渡动画

6.礼物(gift)动画：典型场景是直播类APP的高级动画播放

7.视图转场动画

四. 仍然存在的问题

1. Bodymovin 插件待完善，仍然有部分 AE 效果无法成功导出；

2. Lottie 对 json 文件的支持待完善，目前有部分能成功导出成 json 文件的效果在移动端上无法很好的展现；

3. 目前不支持文字，所有文字必须转成矢量图才能正常展现动画；

4. 动画无法被编辑，即移动端无法更改远端下载到本地的动画；

5.安卓需要API 16及以上，iOS需要iOS8及以上。

demo

下拉刷新demo

ios html下拉刷新,Lottie_ios 实现下拉刷新相关推荐

h5 ios 滚动到底部_分享iOS平台使用H5原生滚动的下拉刷新功能v1.0.0 [不推荐]
上一篇给大家分享了<使用H5原生滚动的上拉加载功能>,但是没有下拉刷新的功能,今天赶快补上. 我们在上一篇中提到,因为iOS下mui中的下拉刷新插件,使用的是自绘的模拟滚动条,不是原生的, ...
IOS 类似抖音下拉刷新与自定义上拉加载
IOS 类似抖音下拉刷新与自定义上拉加载最近UICollectionView中使用了pageEnabled,MJRresh直接使用时出现偏移.这里就暂时考虑简单的做法. 首先考虑在UICollect ...
关于iOS中UITableView下拉距离短刷新没事，下拉距离长就会崩溃的问题解决方案
之前的操作:下拉前将数据清空,然后重新请求数据填充. 出现问题:下拉距离短刷新没事,下拉距离长就会崩溃. 经过仔细梳理:逻辑应该是这样的: 1. 下拉 2. 达到下拉临界值以后再请求网络数据 3. 待 ...
android listview下拉刷新动画,ListView下拉刷新实现方式详解和改造（上）
我们知道页面的下拉刷新目前基本已经成为智能移动终端的标配刷新方式.Twitter设计出现有的下拉刷新(在2013年申请了专利). 下拉刷新1.jpg 这一优美而又简单的刷新方式,很快使得各大系统纷纷效 ...
tableview插入刷新_iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码...
废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" ...
js 实现上拉加载和下拉刷新
目录一.js 实现上拉加载二.js 实现下拉刷新三.注意事项一.js 实现上拉加载实现上拉加载的原理:监听滚动条滑到页面底部,然后就去做一次请求数据. window.onscroll = f ...
Ajax实现无刷新三联动下拉框
1.html代码 <HTML> <HEAD> <title>Ajax实现无刷新三联动下拉框</title> &l ...
Java txt 下拉刷新_手写上拉加载，下拉刷新（小demo）
背景使用过很多下拉刷新,上拉加载的插件,虽然也知道一点原理,但似乎一直不太完全能理解它,闲来无事,手写一个,感受下,借鉴了better-scroll的源码,功能当然相差甚远,也只是个简易版的实现,大 ...
better-scroll 上拉加载，下拉刷新(解决移动端长页面卡顿)
一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> < ...

ios html下拉刷新,Lottie_ios 实现下拉刷新

ios html下拉刷新,Lottie_ios 实现下拉刷新相关推荐

最新文章

热门文章