React Native的一个动画库lottie

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

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

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

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

地址:github.com/react-commu…

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

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

地址:www.lottiefiles.com/

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

地址:bodymovin-editor.firebaseapp.com/

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

地址:github.com/GZY6173/Yag…

最后的最后,欢迎关注我~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值