摘要：圖層信息第一層動(dòng)畫圖層圖層類型動(dòng)畫該圖層起始關(guān)鍵幀該圖層結(jié)束關(guān)鍵幀開始第層動(dòng)畫如何動(dòng)起來時(shí)序圖利用屬性動(dòng)畫控制進(jìn)度，每次進(jìn)度改變通知到每一層，觸發(fā)重繪。對(duì)于簡單的動(dòng)畫，在實(shí)際使用時(shí)性能不太明顯。

本文由云+社區(qū)發(fā)表
作者:paulzeng
導(dǎo)語：Lottie是Airbnb開源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫庫，可實(shí)現(xiàn)非常復(fù)雜的動(dòng)畫，使用也及其簡單，極大釋放人力，值得一試。

Lottie 是Airbnb開源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫庫，能分析 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支持多平臺(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

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

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

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, 
    "ffffd": 0, 
    "assets": [ ], 
    "layers": [
        {
            "ffffd": 0, 
            "ind": 0, 
            "ty": 4, 
            "nm": "center_circle", 
            "ks": {...}, 
            "ao": 0, 
            "shapes": [...], 
            "ip": 0, 
            "op": 900.000036657751, 
            "st": 0, 
            "bm": 0, 
            "sr": 1
        }, 
        {...}, 
        {...}, 
        {...}
    ]
}

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

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

這是用全民K歌release包的測試數(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兼容包，可減小安裝大小。

StringBuilder stringBuilder = new StringBuilder();
BufferedReader bufferedReader = new BufferedReader(new FileReader(new File(JSON_PATH + "react.json")));
String content = null;
while ((content = bufferedReader.readLine()) != null){
    stringBuilder.append(content);
}
JSONObject jsonObject = new JSONObject(stringBuilder.toString());
animationView.setAnimation(jsonObject);
animationView.loop(true);
animationView.playAnimation();

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
    @Override
    public Bitmap fetchBitmap(LottieImageAsset asset) {
        try {
            FileInputStream fileInputStream = new FileInputStream(IMAGE_PATH + asset.getFileName());
            return BitmapFactory.decodeStream(fileInputStream);  ///把流轉(zhuǎn)化為Bitmap圖片
        } catch (Exception e) {
            Log.e(TAG, "", e);
        }
        return null;
    }
});

animationView.setFontAssetDelegate(new FontAssetDelegate(){
    public Typeface fetchFont(String fontFamily) {
        Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);
        return customFont;
    }
});

/*
* Lottie內(nèi)部有兩個(gè)緩存map（強(qiáng)引用緩存，弱引用緩存），在動(dòng)畫文件加載完成后會(huì)根據(jù)設(shè)置的緩存策略緩存動(dòng)畫，方便下次使用。
*/
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong);    //強(qiáng)緩存

animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak);      //弱緩存

設(shè)計(jì)師把一張復(fù)雜的圖片使用多個(gè)圖層來表示，每個(gè)圖層展示一部分內(nèi)容，圖層中的內(nèi)容也可以拆分為多個(gè)元素。拆分元素之后，根據(jù)動(dòng)畫需求，可以多帶帶對(duì)圖層或者圖層中的元素做平移、旋轉(zhuǎn)、收縮等動(dòng)畫。

Lottie的使用的資源是需要先通過bodymovin( bodymovin 插件本身是用于網(wǎng)頁上呈現(xiàn)各種AE效果的一個(gè)開源庫)將 Adobe After Effects (AE)生成的aep動(dòng)畫工程文件轉(zhuǎn)換為通用的json格式描述文件。Lottie則負(fù)責(zé)解析動(dòng)畫的數(shù)據(jù)，計(jì)算每個(gè)動(dòng)畫在某個(gè)時(shí)間點(diǎn)的狀態(tài)，準(zhǔn)確地繪制到屏幕上。

導(dǎo)出的json動(dòng)畫描述文件：

{
    "v": "4.6.0", 
    "fr": 29.9700012207031, 
    "ip": 0, 
    "op": 141.000005743048, 
    "w": 800, 
    "h": 800, 
    "ffffd": 0, 
    "assets": [ ], 
    "layers": [
        {...}, 
    ]
}

Lottie主要類圖：

圖：lottie_class

Lottie對(duì)外通過控件LottieAnimationView暴露接口，控制動(dòng)畫。

LottieAnimationView繼承自ImageView，通過當(dāng)前時(shí)間繪制canvas顯示到界面上。這里有兩個(gè)關(guān)鍵類：LottieComposition 負(fù)責(zé)解析json描述文件，把json內(nèi)容轉(zhuǎn)成Java數(shù)據(jù)對(duì)象；LottieDrawable負(fù)責(zé)繪制，把LottieComposition轉(zhuǎn)成的數(shù)據(jù)對(duì)象繪制成drawable顯示到View上。順序如下：

LottieComposition負(fù)責(zé)解析json文件，建立數(shù)據(jù)到j(luò)ava對(duì)象的映射關(guān)系。

（1）解析json外部結(jié)構(gòu)

LottieComposition封裝整個(gè)動(dòng)畫的信息，包括動(dòng)畫大小，動(dòng)畫時(shí)長，幀率，用到的圖片，字體，圖層等等。

json外部結(jié)構(gòu)

{
    "v": "4.6.0",               //bodymovin的版本
    "fr": 29.9700012207031,     //幀率
    "ip": 0,                    //起始關(guān)鍵幀
    "op": 141.000005743048,     //結(jié)束關(guān)鍵幀
    "w": 800,                   //動(dòng)畫寬度
    "h": 800,                   //動(dòng)畫高度
    "ffffd": 0, 
    "assets": [...]             //資源信息
    "layers": [...]             //圖層信息
}
//解析json的源碼
static LottieComposition fromJsonSync(Resources res, JSONObject json) {
      Rect bounds = null;
      float scale = res.getDisplayMetrics().density;
      int width = json.optInt("w", -1);
      int height = json.optInt("h", -1);

      if (width != -1 && height != -1) {
        int scaledWidth = (int) (width * scale);
        int scaledHeight = (int) (height * scale);
        bounds = new Rect(0, 0, scaledWidth, scaledHeight);
      }

      long startFrame = json.optLong("ip", 0);
      long endFrame = json.optLong("op", 0);
      float frameRate = (float) json.optDouble("fr", 0);
      String version = json.optString("v");
      String[] versions = version.split("[.]");
      int major = Integer.parseInt(versions[0]);
      int minor = Integer.parseInt(versions[1]);
      int patch = Integer.parseInt(versions[2]);
      LottieComposition composition = new LottieComposition(
          bounds, startFrame, endFrame, frameRate, scale, major, minor, patch);
      JSONArray assetsJson = json.optJSONArray("assets");
      parseImages(assetsJson, composition); //解析圖片
      parsePrecomps(assetsJson, composition);
      parseFonts(json.optJSONObject("fonts"), composition); //解析字體
      parseChars(json.optJSONArray("chars"), composition);  //解析字符
      parseLayers(json, composition);   //解析圖層
      return composition;
    }

（2）解析圖片資源

LottieImageAsset類封裝圖片信息

"assets": [                 //資源信息
    {                       //第一張圖片
        "id": "image_0",    //圖片id
        "w": 58,            //圖片寬度
        "h": 31,            //圖片高度
        "u": "images/",     //圖片路徑
        "p": "img_0.png"    //圖片名稱
    },
    {...}                   //第n張圖片
]
static LottieImageAsset newInstance(JSONObject imageJson) {
    return new LottieImageAsset(imageJson.optInt("w"), imageJson.optInt("h"), imageJson.optString("id"),
          imageJson.optString("p"));
}

（3）解析圖層

Layer封裝圖層信息，現(xiàn)在lottie只支持PreComp，Solid，Image，Null，Shape，Text這6中圖層。

"layers": [                 //圖層信息
    {                       //第一層動(dòng)畫
        "ffffd": 0, 
        "ind": 0,           //layer id 圖層 id
        "ty": 4,            //圖層類型
        "nm": "center_circle", 
        "ks": {...},        //動(dòng)畫
        "ao": 0, 
        "shapes": [...], 
        "ip": 0,            //inFrame 該圖層起始關(guān)鍵幀
        "op": 90,           //outFrame 該圖層結(jié)束關(guān)鍵幀
        "st": 0,            //startFrame 開始
        "bm": 0, 
        "sr": 1
    }, 
    {...}                   //第n層動(dòng)畫
]

Lottie時(shí)序圖：

利用屬性動(dòng)畫控制進(jìn)度，每次進(jìn)度改變通知到每一層，觸發(fā)LottieAnimationView重繪。

(1)利用屬性動(dòng)畫計(jì)算進(jìn)度

這里用到了屬性動(dòng)畫來產(chǎn)生一個(gè)0～1的插值，根據(jù)不同的插值來設(shè)置當(dāng)前動(dòng)畫進(jìn)度。

代碼如下：

public LottieDrawable() {
    animator.setRepeatCount(0);
    animator.setInterpolator(new LinearInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            if (systemAnimationsAreDisabled) {
                animator.cancel();
                setProgress(1f);
            } else {
                setProgress((float) animation.getAnimatedValue());
            }
        }
    });
}

(2)通過CompositionLayer把進(jìn)度傳遞到各個(gè)圖層

@Override
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    super.setProgress(progress);
    if (timeRemapping != null) {
        long duration = lottieDrawable.getComposition().getDuration();
        long remappedTime = (long) (timeRemapping.getValue() * 1000);
        progress = remappedTime / (float) duration;
    }
    if (layerModel.getTimeStretch() != 0) {
        progress /= layerModel.getTimeStretch();
    }
    progress -= layerModel.getStartProgress();
    for (int i = layers.size() - 1; i >= 0; i--) {
        layers.get(i).setProgress(progress);
    }
}

(3)通知進(jìn)度改變

  void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
    if (progress < getStartDelayProgress()) {
      progress = 0f;
    } else if (progress > getEndProgress()) {
      progress = 1f;
    }

    if (progress == this.progress) {
      return;
    }
    this.progress = progress;

    for (int i = 0; i < listeners.size(); i++) {
      listeners.get(i).onValueChanged();
    }
  }

(4)最終回調(diào)到LottieAnimationView的invalidateDrawable

@Override
public void invalidateDrawable(@NonNull Drawable dr) {
    if (getDrawable() == lottieDrawable) {
      // We always want to invalidate the root drawable so it redraws the whole drawable.
      // Eventually it would be great to be able to invalidate just the changed region.
        super.invalidateDrawable(lottieDrawable);
    } else {
      // Otherwise work as regular ImageView
        super.invalidateDrawable(dr);
    }
}

(5)最后觸發(fā)LottieDrawable重繪

@Override
public void draw(@NonNull Canvas canvas) {
    ...
    matrix.reset();
    matrix.preScale(scale, scale);
    compositionLayer.draw(canvas, matrix, alpha);   //這里會(huì)調(diào)用所有l(wèi)ayer的繪制方法
    if (hasExtraScale) {
        canvas.restore();
    }
}

如果沒有mask和mattes，那么性能和內(nèi)存非常好，沒有bitmap創(chuàng)建，大部分操作都是簡單的cavas繪制。

如果存在mattes，將會(huì)創(chuàng)建2～3個(gè)bitmap。bitmap在動(dòng)畫加載到window時(shí)被創(chuàng)建，被window刪除時(shí)回收。所以不宜在RecyclerView中使用包涵mattes或者mask的動(dòng)畫，否則會(huì)引起bitmap抖動(dòng)。除了內(nèi)存抖動(dòng)，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也會(huì)降低動(dòng)畫性能。對(duì)于簡單的動(dòng)畫，在實(shí)際使用時(shí)性能不太明顯。

如果在列表中使用動(dòng)畫，推薦使用緩存LottieAnimationView.setAnimation(String, CacheStrategy) 。

以下性能對(duì)比是以K歌內(nèi)單個(gè)禮物動(dòng)畫效果

Lottie動(dòng)畫在未開啟硬件加速的情況下，幀率、內(nèi)存，CPU都比屬性動(dòng)畫差，開啟硬件加速后，性能差不多。

主要耗時(shí)在draw方法，繪制區(qū)域越小，耗時(shí)越小

全民K歌每個(gè)大版本的首次啟動(dòng)都會(huì)有視頻引導(dǎo)動(dòng)畫，每次都會(huì)在清晰度和文件大小平衡，最終導(dǎo)出一個(gè)大概有3-4M的引導(dǎo)視頻，使用lottie可提高動(dòng)畫清晰度和減小安裝包大小

這是全民K歌的禮物面板，內(nèi)部有大量禮物動(dòng)畫，每個(gè)禮物動(dòng)畫都不相同，動(dòng)畫過程中有大量的旋轉(zhuǎn)，透明度，大小的變化，需要用屬性動(dòng)畫實(shí)現(xiàn)，非常麻煩，代碼可維護(hù)性也比較差。對(duì)比使用lottie后，有幾大優(yōu)勢：

1、100%實(shí)現(xiàn)設(shè)計(jì)效果

2、客戶端代碼量極少，易維護(hù)

3、每個(gè)動(dòng)畫可動(dòng)態(tài)配置動(dòng)畫樣式（加載不同的json）

4、所有動(dòng)畫都可動(dòng)態(tài)配置，動(dòng)畫配置文件，素材都可從網(wǎng)上加載

K歌的說唱功能需要歌詞按照特定的動(dòng)畫展示出來，這里就涉及歌詞放大，縮小，旋轉(zhuǎn)等等特效。實(shí)現(xiàn)時(shí)，根據(jù)當(dāng)前時(shí)間，在canvas上歌詞繪制出來，最終再和聲音融合在一起生成一個(gè)MV視頻，這里就導(dǎo)致動(dòng)畫不能特別復(fù)雜，并且有一定的規(guī)律。

如果使用lottie后，可以把效果導(dǎo)出到j(luò)son動(dòng)畫文件里，客戶端加載動(dòng)畫文件，循環(huán)設(shè)置進(jìn)度，讀取每幀畫面，再和聲音融合生成MV。

優(yōu)勢：

1.動(dòng)畫豐富

2.代碼量少

3.可使用設(shè)計(jì)導(dǎo)出的字體

代碼

animationView.setProgress(progress);        //設(shè)置當(dāng)前進(jìn)度
animationView.buildDrawingCache();          //強(qiáng)制緩存繪制數(shù)據(jù)
Bitmap image = animationView.getDrawingCache(); //獲取當(dāng)前繪制數(shù)據(jù)

1.劣勢

（1）性能不夠好—某些動(dòng)畫特效，內(nèi)存和性能不夠好；相對(duì)于屬性動(dòng)畫，在展示大動(dòng)畫時(shí)，幀率較低

2.優(yōu)勢

（1）開發(fā)效率高—代碼實(shí)現(xiàn)簡單，更換動(dòng)畫方便，易于調(diào)試和維護(hù)。

（2）數(shù)據(jù)源多樣性—可從assets,sdcard,網(wǎng)絡(luò)加載動(dòng)畫資源，能做到不發(fā)版本，動(dòng)態(tài)更新

（3）跨平臺(tái)—設(shè)計(jì)稿導(dǎo)出一份動(dòng)畫描述文件，android,ios,react native通用

Lottie使用簡單，易于上手，非常值得嘗試。

1.GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS

2.Lottie的使用及原理淺析 - 彩筆學(xué)長 - CSDN博客

3.從json文件到炫酷動(dòng)畫-Lottie實(shí)現(xiàn)思路和源碼分析 - 簡書

4.Most Popular - LottieFiles

此文已由作者授權(quán)騰訊云+社區(qū)在各渠道發(fā)布

獲取更多新鮮技術(shù)干貨，可以關(guān)注我們騰訊云技術(shù)社區(qū)-云加社區(qū)官方號(hào)及知乎機(jī)構(gòu)號(hào)