优美的开源动效库:Lottie
1、强大的动效Lottie
Lottie是一个适用于Android,iOS,Web和Windows的库,它可以使用Bodymovin解析以json格式导出的Adobe After Effects动画,并在移动设备和Web上原生渲染它们!
GitHub:https://github.com/airbnb/lottie-android
Lottie官网:http://airbnb.io/lottie/
2、引入Lottie
在Android工程中官方唯一推荐的方式在build.gradle中添加依赖即可:
dependencies {
...
implementation 'com.airbnb.android:lottie:3.2.2'
...
}
3、使用Lottie
不急着知道Lottie的原理,简单举个例子先了解Lottie。在布局中添加LottieAnimationView控件:
<com.airbnb.lottie.LottieAnimationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lottie_autoPlay="true"
app:lottie_fileName="json/lottie.json"
app:lottie_loop="true" />
定义了一些View 的属性,参考下面自定义的declare-styleable:
<resources>
<declare-styleable name="LottieAnimationView">
<attr format="string" name="lottie_fileName"/>
<attr format="reference" name="lottie_rawRes"/>
<attr format="string" name="lottie_url"/>
<attr format="reference" name="lottie_fallbackRes"/>
<attr format="boolean" name="lottie_autoPlay"/>
<attr format="boolean" name="lottie_loop"/>
<attr format="enum" name="lottie_repeatMode">
<enum name="restart" value="1"/>
<enum name="reverse" value="2"/>
</attr>
<attr format="integer" name="lottie_repeatCount"/>
<attr format="string" name="lottie_imageAssetsFolder"/>
<attr format="float" name="lottie_progress"/>
<attr format="boolean" name="lottie_enableMergePathsForKitKatAndAbove"/>
<attr format="color" name="lottie_colorFilter"/>
<attr format="float" name="lottie_scale"/>
<attr format="float" name="lottie_speed"/>
<!-- These values must be kept in sync with the RenderMode enum -->
<attr format="enum" name="lottie_renderMode">
<enum name="automatic" value="0"/>
<enum name="hardware" value="1"/>
<enum name="software" value="2"/>
</attr>
</declare-styleable>
<item name="lottie_layer_name" type="id"/>
</resources>
4、Lottie可用的资源
最关键的是添加动画资源,官方给了一下几种方式添加资源,可以从json文件、json字符串、网络流json等等途径给LottieAnimationView设置动画资源
- 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.
5、Lottie资源
从下面的网站可以下载UI设计师分享的各式各样JSON动画:
LottieFiles: https://www.lottiefiles.com/
精彩的人生需要浪漫、无畏和勇气。