lottiefiles app

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

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

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

- Android, iOS, 和React Native多臺(tái)支持

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

- 可手動(dòng)設(shè)置進(jìn)度,綁定手勢(shì),事件等

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

- 性能好,顯示效果完

平臺(tái)介紹：

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

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

lottie使用方法：

Lottie支持多平臺(tái)，使用同一個(gè)JSON動(dòng)畫文件，可在不同平臺(tái)實(shí)現(xiàn)相同的效果。

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

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

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

這是React logo的動(dòng)畫，以下以Android平臺(tái)為例如何使用Lottie

1.下載Lottie

在項(xiàng)目的 build.gradle 文件添加依賴

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

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

Lottie默認(rèn)讀取Assets中的文件，我們需要把動(dòng)畫文件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動(dòng)畫效果

<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)需要做降級(jí)動(dòng)畫或者不展示動(dòng)畫

(2)安裝包

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

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

中文名：Lottie

包名：com.airbnb.lottie

MD5值：ae7af6d4774f10281f4e84ef4d675ab3