React Native的一个动画库lottie

作者: 养喵大师薛定谔 | 来源:发表于2018-12-05 23:08 被阅读45次

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

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

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

    example

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

    地址:https://github.com/react-community/lottie-react-native

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

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

    地址:https://www.lottiefiles.com/

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

    地址:https://bodymovin-editor.firebaseapp.com/

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

    地址:https://github.com/GZY6173/Yagami-Design/tree/master/Toast

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

    公众号

    相关文章

      网友评论

      本文标题:React Native的一个动画库lottie

      本文链接:https://www.haomeiwen.com/subject/auvgcqtx.html