优美的开源动效库：Lottie

优美的开源动效库：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/