前言
今天工作时突然在项目xml布局看到了一个完全不认识的控件,一开始以为是自定义View之类的:
<com.airbnb.lottie.LottieAnimationView android:id="@+id/lt_gift" android:layout_width="200dp" android:layout_height="200dp" app:lottie_autoPlay="true" app:lottie_fileName="lottie/gift.json" app:lottie_loop="true" app:lottie_repeatMode="restart"/>
但一看包所在名称,再一结合这个控件的显示效果与该布局中的命名,我以为是用来专门加载GIF动图的,但经过我在网上检索,查阅一些博客,访问Lottie的GitHub项目地址后,我才有了大致的印象,原来这个就是为我们开发者省心,让UI设计师忙碌的动画加载利器。
正篇
开场说过,本人对此库的认知也有限,本篇仅供参考用法,如有纰漏,望各位大佬能指正!
介绍
其实最好的介绍就是官方自我介绍,如下:
网络异常,图片无法展示
|
大致意思就是,首先它能多个系统开发上使用,如:安卓Android,苹果IOS,以及Windows、React Native、 Web上都可以使用。
而官方的自我介绍也很幽默:
Lottie是一个适用于Android和iOS的移动库,可以解析使用Bodymovin导出为json的AE(Adobe After Effects)动画,并在移动设备上以本机方式呈现它们!第一次,可以让设计师去创建和发布这些精美的动画,而不需要工程师煞费苦心地手动重新创建。他们说一张图片胜过1000个单词,所以这里有13000个单词。
总结而言,就是我们可以不用花费大量时间用代码调试动画,而是让UI设计去制作好成品,我们直接用就行。
如何放入项目中
首先,因为是新的库,我们需将包导入到我们build.gradle(app)中:
implementation 'com.airbnb.android:lottie:5.2.0'
网络异常,图片无法展示
|
接着就是文章开篇的代码,我们需要在XML布局的合适位置放入:
<com.airbnb.lottie.LottieAnimationView 使用Lottie android:id="@+id/lt_gift" id名 android:layout_width="200dp" 控件宽度 android:layout_height="200dp" 控件高度 app:lottie_autoPlay="true" 自动播放动画(default: false) app:lottie_fileName="lottie/gift.json" 目录下的json文件名(json文件可以直接放到assets目录下,比如“gift.json”,也可新建子目录,比如"lottie/gift.json") app:lottie_loop="true" 循环播放(default:false) app:lottie_repeatMode="restart" 循环模式(default:restart) />
总结
本节我们看了如何将Lottie放入我们的安卓项目中并在XML中写入,下节我们会继续看它在逻辑代码中的使用方法,感谢您的观看!