优美的开源动效库:Lottie

Quibbler 2020-2-11 1910

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

        


上传的附件:
不忘初心的阿甘
最新回复 (0)
    • 安卓笔记本
      2
        登录 注册 QQ
返回
仅供学习交流,切勿用于商业用途。如有错误欢迎指出:fluent0418@gmail.com