lottiefiles app

Airbnb團隊開發(fā)的lottie動效解決了很多前端動畫設(shè)計問題，不僅提高了團隊間的協(xié)作，也讓設(shè)計師和開發(fā)之間的矛盾少了不少。這款lottiefiles app是Airbnb團隊提供的lottie動效的手機客戶端，通過這款軟件你可以將JSON動畫文件在手機上播放，非常方便。

產(chǎn)品優(yōu)勢：

- 開發(fā)無需編寫動畫,只需加載

- Android, iOS, 和React Native多臺支持

- Path,flat等風(fēng)格動畫實現(xiàn)完美

- 可手動設(shè)置進度,綁定手勢,事件等

- 可網(wǎng)絡(luò)加載,動態(tài)控制播放速度等

- 性能好,顯示效果完

平臺介紹：

Lottie 是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，能分析 Adobe After Effects 導(dǎo)出的動畫，并且能讓原生 App 像使用靜態(tài)素材一樣使用這些動畫，完美實現(xiàn)動畫效果。

現(xiàn)在使用各平臺的 native 代碼實現(xiàn)一套復(fù)雜的動畫是一件很困難并且耗時的事，我們需要為不同尺寸的屏幕加載不同的素材資源，還需要寫大量難維護的代碼，而Lottie可以做到同一個動畫文件在不同平臺上實現(xiàn)相同的效果，極大減少開發(fā)時間，實現(xiàn)不同的動畫，只需要設(shè)置不同的動畫文件即可，極大減少開發(fā)和維護成本。

lottie使用方法：

Lottie支持多平臺，使用同一個JSON動畫文件，可在不同平臺實現(xiàn)相同的效果。

Android 通過Airbnb的開源項目lottie-android實現(xiàn)，最低支持 API 16;

IOS 通過Airbnb的開源項目lottie-ios實現(xiàn)，最低支持 IOS 7;

React Native，通過Airbnb的開源項目lottie-react-native實現(xiàn);

這是React logo的動畫，以下以Android平臺為例如何使用Lottie

1.下載Lottie

在項目的 build.gradle 文件添加依賴

dependencies {  
  compile 'com.airbnb.android:lottie:2.1.0'}

2.添加 Adobe After Effects 導(dǎo)出的動畫文件

Lottie默認讀取Assets中的文件，我們需要把動畫文件react.json 保存在app/src/main/assets文件里。（文件比較大，只展示了部分內(nèi)容，文件鏈接）

{
    "v": "4.6.0", 
    "fr": 29.9700012207031, 
    "ip": 0, 
    "op": 141.000005743048, 
    "w": 800, 
    "h": 800, 
    "ddd": 0, 
    "assets": [ ], 
    "layers": [
        {
            "ddd": 0, 
            "ind": 0, 
            "ty": 4, 
            "nm": "center_circle", 
            "ks": {...}, 
            "ao": 0, 
            "shapes": [...], 
            "ip": 0, 
            "op": 900.000036657751, 
            "st": 0, 
            "bm": 0, 
            "sr": 1
        }, 
        {...}, 
        {...}, 
        {...}
    ]}

3.使用Lottie

在布局文件中直接添加Lottie的LottieAnimationView控件，即可在界面顯示React logo動畫效果

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="react.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

4.引入Lottie影響

(1)兼容性

Lottie 最低支持版本API 16，低版本系統(tǒng)需要做降級動畫或者不展示動畫

(2)安裝包

這是用全民K歌release包的測試數(shù)據(jù)，lottie本身方法數(shù)不小，有方法數(shù)超標和安裝包過大的風(fēng)險，業(yè)務(wù)可自行評估

注：LottieAnimationView繼承于V7的AppCompatImageView，需要引入V7兼容包，根據(jù)業(yè)務(wù)需要，可以源碼引入Lottie，讓LottieAnimationView繼承與ImageView，就不用引入V7兼容包，可減小安裝大小。

中文名：Lottie

包名：com.airbnb.lottie

MD5值：ae7af6d4774f10281f4e84ef4d675ab3