1、Lottie简介
Lottie是Airbnb开源的一个支持 Android、iOS 以及 ReactNative等,利用json文件的方式快速实现动画效果的库
android库的地址:https://github.com/airbnb/lottie-android
IOS库的地址:https://github.com/airbnb/lottie-ios
文档地址:http://airbnb.io/lottie/android/android.html#getting-started
这是一个特别棒的动画库,有完善的源码和演示demo
2、动画效果图
3、lottie-android的使用
3.1、gradle文件添加依赖,目前maven central 上最新版本是:2.6.1
dependencies {
implementation 'com.airbnb.android:lottie:$lottieVersion'
}
或者下载aar包
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation (name: 'lottie-release',ext:'aar')
}
3.2、核心类
LottieAnimationView:
继承自 ImageView
默认的以最简单的方式去加载Lottie动画
LottieDrawable:
和LottieAnimationView的大部分api相同,你可以使用它做任何view动画
3.3、怎么加载动画
Lottie 支持API 16以上
Lottie可以通过以下方式加载动画:
- A json animation in
src/main/res/raw
. - A json file in
src/main/assets
. - A zip file in
src/main/assets
. See images docs for more info. - A url to a json or zip file.
- A json string. The source can be from anything including your own network stack.
- An InputStream to either a json file or a zip file.
以上json动画文件可以通过AE工具导出来,而且神奇的是,我们更本就看不到图片的存在,可能大家认为,json文件中是不是图片的路径,我们还需要在drawable中放置对应图片资源,NO,不需要,完全不需要,我们只需要吧UX给的动画json文件重命名,比如有一个?脸的动画,我们命名为cry.json,然后吧该文件放到src/main/res/raw
目录下,简单粗暴的动画效果就出来了,当然也可以放到src/main/assets目录,或者网络上下载动画资源包,都是可以的。
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="@raw/cry.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />
总结:有点不言而喻,完全解放双手没复杂动画简单搞定,不用使用图片资源减少了包体积,可以网络下发动画资源灵活可控。