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

 

總結：有點不言而喻，徹底解放雙手沒複雜動畫簡單搞定，不用使用圖片資源減小了包體積，能夠網絡下發動畫資源靈活可控。