Lottie 动画so easy 支持android/ios/react-native/web

一、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

 

二、动画效果图

三、lottie-android的使用

3.一、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.二、核心类

LottieAnimationView： 继承自 ImageView 默认的以最简单的方式去加载Lottie动画

LottieDrawable：和LottieAnimationView的大部分api相同，你可使用它作任何view动画

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" />

 

总结：有点不言而喻，彻底解放双手没复杂动画简单搞定，不用使用图片资源减小了包体积，能够网络下发动画资源灵活可控。