lottie素材库-React Native的一个动画库lottie

版本是 3.2.2。

GitHub:

官方文档:

如果你因为各种原因,没有办法专门由一个设计师来为你的 App 定制动画效果,你也可以尝试找找线上公开的一些 Lottie 的动画效果,这里推荐使用 LottieFiles 这个网站。

LottieFiles: /

集成流程

UI 使用 AE → 安装 bodymovin 插件 → 将 AE 中的动画工程文件通过 bodymovin 转换为 .json 文件→ 发给开发-开发集成Lottie框架-直接在项目中使用

是不是很简洁,这样我们压根就不需要一帧一帧的png或者.gif文件了,不仅让gif的加载速度变快而且节约了我们app的内部空间。

AE安装插件教程(这里的安装教程让UI去看就好)

MAC

windows

懒得写了 介绍两个别人的文章 :

文章2

文章3

正好最近发现一个很好玩的组件,就和大家分享一下。

这是一个动画库,由Airbnb产品,对,就是那个宣布放弃使用React Native的Airbnb,这让我一个用RN做APP的很是尴尬。但是这个动画库还是很好用的,名字叫Lottie,反正就是个名字,也不知道什么意思,估计Airbnb的设计师叫Lottie吧。

这个东西本来是用在Android/ios的,Airbnb还特意做了个RN版本,不过本质上也是用的原生,所以差不多。其实流程很简单,就是用AE做出动画,用bodymovin插件把动画导出成json,Lottie会解析这个json并且渲染出来。看个官方的例子吧:

效果还是蛮不错的,使用起来也很简单,具体可以去看官方文档。

地址:

好,那么问题来了,一个直男程序员,根本不懂设计,该怎么办?去哪找个设计师帮忙做这个?要是能找到愿意帮忙做动画的设计师,还能没有女朋友?还用独自一人gay里gay气的望穿秋水吗?

作为一个开源的组件,秉持着开源的精神,总有设计师们愿意分享自己的设计。所以,记住这个网站,不一定有用~

地址:

/

当然,也许设计师做出来的东西的颜色不如你意,但那个json文件你还不会改,没关系,记住这个地址,你可以随便改颜色。

地址:

/

最后,秉持着实践出真知的原则,我随手做了个Toast组件,放在了我的github上,有兴趣的童鞋可以去看看,请多指教~

地址:

开源项目地址:

Lottie是一个适用于Android和iOS的移动库,它可以使用 Bodymovin 解析以json 格式 导出的 Adobe After Effects 动画,并在移动设备上进行本地渲染!

lottie_loop 设置动画是否循环,默认是不循环的(这个在新版本中已经不建议使用了!)

lottie_colorFilter 设置动画的着色颜色,这个就是把你的动画变成了一个颜色的了!但是有些动画太深的话会变得一片模糊!所以感觉这个东西和json文件的内容有关!!!

lottie_autoPlay 设置动画是否自动播放

lottie_repeatCount 重复次数

lottie_imageAssetsFolder 动画依赖的图片资源文件地址

lottie_scale 设置动画的比例,但是我设置了并没有什么用!!!

lottie_repeatMode 设置动画的重复模式RESTART:重复、REVERSE:反向