這樣做動畫交互，一點都不費力！

来源:https://www.cnblogs.com/qcloud1001/archive/2019/01/09/10243510.html
-Advertisement-
Play Games

本文由雲+社區發表 作者:paulzeng 導語： Lottie是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，可實現非常複雜的動畫，使用也及其簡單，極大釋放人力，值得一試。 一、簡介 Lottie 是Airbnb開源的一個面向 iOS、Android、Re ...


本文由雲+社區發表

作者:paulzeng

導語：Lottie是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，可實現非常複雜的動畫，使用也及其簡單，極大釋放人力，值得一試。

一、簡介

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

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

官方效果圖：

img

img

二、如何使用

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

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

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

React Native，通過Airbnb的開源項目lottie-react-native實現;

img

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

1.下載Lottie

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

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

2.添加 Adobe After Effects 導出的動畫文件

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

{
    "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，低版本系統需要做降級動畫或者不展示動畫

(2)安裝包

影響項 使用前 使用後 結論
方法數 144807 145891 增加1084個方法
安裝包大小 41969KB 42037KB 增大68KB

這是用全民K歌release包的測試數據，lottie本身方法數不小，有方法數超標和安裝包過大的風險，業務可自行評估

註：LottieAnimationView繼承於V7的AppCompatImageView，需要引入V7相容包，根據業務需要，可以源碼引入Lottie，讓LottieAnimationView繼承與ImageView，就不用引入V7相容包，可減小安裝大小。

三、使用小技巧

1.載入SDCard動畫文件

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();

2.載入SDCard圖片

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

3.載入SDCard字體

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

4.緩存動畫

/*
* Lottie內部有兩個緩存map（強引用緩存，弱引用緩存），在動畫文件載入完成後會根據設置的緩存策略緩存動畫，方便下次使用。
*/
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong);    //強緩存

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

四、Lottie實現原理

img

設計師把一張複雜的圖片使用多個圖層來表示，每個圖層展示一部分內容，圖層中的內容也可以拆分為多個元素。拆分元素之後，根據動畫需求，可以單獨對圖層或者圖層中的元素做平移、旋轉、收縮等動畫。

Lottie的使用的資源是需要先通過bodymovin( bodymovin 插件本身是用於網頁上呈現各種AE效果的一個開源庫)將 Adobe After Effects (AE)生成的aep動畫工程文件轉換為通用的json格式描述文件。Lottie則負責解析動畫的數據，計算每個動畫在某個時間點的狀態，準確地繪製到屏幕上。

導出的json動畫描述文件：

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

Lottie主要類圖：

img

圖：lottie_class

Lottie對外通過控制項LottieAnimationView暴露介面，控制動畫。

LottieAnimationView繼承自ImageView，通過當前時間繪製canvas顯示到界面上。這裡有兩個關鍵類：LottieComposition 負責解析json描述文件，把json內容轉成Java數據對象；LottieDrawable負責繪製，把LottieComposition轉成的數據對象繪製成drawable顯示到View上。順序如下：

img

1.json文件解析

LottieComposition負責解析json文件，建立數據到java對象的映射關係。

（1）解析json外部結構

LottieComposition封裝整個動畫的信息，包括動畫大小，動畫時長，幀率，用到的圖片，字體，圖層等等。

json外部結構

{
    "v": "4.6.0",               //bodymovin的版本
    "fr": 29.9700012207031,     //幀率
    "ip": 0,                    //起始關鍵幀
    "op": 141.000005743048,     //結束關鍵幀
    "w": 800,                   //動畫寬度
    "h": 800,                   //動畫高度
    "ddd": 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封裝圖層信息，現在lottie只支持PreComp，Solid，Image，Null，Shape，Text這6中圖層。

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

2.如何動起來

Lottie時序圖：

img

利用屬性動畫控制進度，每次進度改變通知到每一層，觸發LottieAnimationView重繪。

(1)利用屬性動畫計算進度

這裡用到了屬性動畫來產生一個0～1的插值，根據不同的插值來設置當前動畫進度。

代碼如下：

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把進度傳遞到各個圖層

@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)通知進度改變

  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)最終回調到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)最後觸發LottieDrawable重繪

@Override
public void draw(@NonNull Canvas canvas) {
    ...
    matrix.reset();
    matrix.preScale(scale, scale);
    compositionLayer.draw(canvas, matrix, alpha);   //這裡會調用所有layer的繪製方法
    if (hasExtraScale) {
        canvas.restore();
    }
}

五、性能

1.官方說明

如果沒有mask和mattes，那麼性能和記憶體非常好，沒有bitmap創建，大部分操作都是簡單的cavas繪製。

如果存在mattes，將會創建2～3個bitmap。bitmap在動畫載入到window時被創建，被window刪除時回收。所以不宜在RecyclerView中使用包涵mattes或者mask的動畫，否則會引起bitmap抖動。除了記憶體抖動，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也會降低動畫性能。對於簡單的動畫，在實際使用時性能不太明顯。

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

2.屬性動畫和Lottie動畫對比

以下性能對比是以K歌內單個禮物動畫效果

屬性動畫 lottie使用硬體加速 lottie未使用硬體加速
幀率 img img img
內容 img img img
CPU img img img

Lottie動畫在未開啟硬體加速的情況下，幀率、記憶體，CPU都比屬性動畫差，開啟硬體加速後，性能差不多。

3、未開啟硬體加速，Lottie動畫大小幀率對比

0.12倍 1倍
img img

主要耗時在draw方法，繪製區域越小，耗時越小

六、K歌可用的場景

1.特性引導視頻

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

2.loading動畫

img

img

3.禮物動畫

img

這是全民K歌的禮物面板，內部有大量禮物動畫，每個禮物動畫都不相同，動畫過程中有大量的旋轉，透明度，大小的變化，需要用屬性動畫實現，非常麻煩，代碼可維護性也比較差。對比使用lottie後，有幾大優勢：

1、100%實現設計效果

2、客戶端代碼量極少，易維護

3、每個動畫可動態配置動畫樣式（載入不同的json）

4、所有動畫都可動態配置，動畫配置文件，素材都可從網上載入

4.說唱

img

K歌的說唱功能需要歌詞按照特定的動畫展示出來，這裡就涉及歌詞放大，縮小，旋轉等等特效。實現時，根據當前時間，在canvas上歌詞繪製出來，最終再和聲音融合在一起生成一個MV視頻，這裡就導致動畫不能特別複雜，並且有一定的規律。

如果使用lottie後，可以把效果導出到json動畫文件里，客戶端載入動畫文件，迴圈設置進度，讀取每幀畫面，再和聲音融合生成MV。

優勢：

1.動畫豐富

2.代碼量少

3.可使用設計導出的字體

代碼

animationView.setProgress(progress);        //設置當前進度
animationView.buildDrawingCache();          //強制緩存繪製數據
Bitmap image = animationView.getDrawingCache(); //獲取當前繪製數據

七、總結

1.劣勢

（1）性能不夠好—某些動畫特效，記憶體和性能不夠好；相對於屬性動畫，在展示大動畫時，幀率較低

2.優勢

（1）開發效率高—代碼實現簡單，更換動畫方便，易於調試和維護。

（2）數據源多樣性—可從assets,sdcard,網路載入動畫資源，能做到不發版本，動態更新

（3）跨平臺—設計稿導出一份動畫描述文件，android,ios,react native通用

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

八、參考資料

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

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

3.從json文件到炫酷動畫-Lottie實現思路和源碼分析 - 簡書

4.Most Popular - LottieFiles

此文已由作者授權騰訊雲+社區在各渠道發佈

獲取更多新鮮技術乾貨，可以關註我們騰訊雲技術社區-雲加社區官方號及知乎機構號


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript--select標簽的添加刪除功能的使用
    在網頁開發中，常常遇見這種問題，給定兩個框，A和B，和幾個圖片按鈕，A中存在幾個操作，點擊圖片按鈕，填加至B中，或者從B中移除等，這種效果如何實現，本文加以總結。 幾種效果圖如下： 原始圖： 添加全部功能圖： 移除全部功能圖： 添加選中功能圖： 移除選中功能圖： 實現思路： 1、首先要做出這種效果圖 ...
  • 不可思議的純 CSS 滾動進度條效果
    結論先行，如何使用 CSS 實現下述滾動條效果？ 就是頂部黃色的滾動進度條，隨著頁面的滾動進度而變化長短。 在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不藉助 JS ，能否巧妙的實現上述效果。 OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便 ...
  • 解決Not allowed to load local resource
    在做視頻上傳的時候,發現Not allowed to load local resource,也弄了很久,怕自己忘記了所以記下來 ...
  • 移動端觸摸複製功能
    公司項目之前一個需求，需要用戶一進頁面觸摸手機後就自動幫他複製一個串碼。。wtf? 還有這種操作？好吧，需求出來了，那就想實現吧。。。 用戶進來觸摸手機 會產生 三個事件，我們肯定不能直接寫這三個事件去複製，這樣會影響它的預設事件，我們還要做的神不知鬼不覺。。。 所以，在函數內部我們就需要用到下麵代 ...
  • 購物車數量加減
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ //獲得文本框對象 var t = $("#text_box"); //初 ...
  • 自定義jquery公用方法切換當前tab欄
    經常在項目中需要寫到切換當前欄目的展示效果，定義公共方法 ...
  • js對象拷貝的方法
     對象拷貝的方法是一個難點，尤其是深拷貝。建議把代碼都運行下，幫助理解拷貝。 一. json方法 1. 適合情況 ：  JSON對象的深度克隆。方法是先JSON.stringify() 轉為json字元串， 再JSON.parse() 轉為json數組 2. 缺點：   ...
  • Js 轉動抽獎實現
    一、樣本 地址：http://js.zhuamimi.cn/choujiang/index.htm 源碼：https://pan.baidu.com/s/15KhesfcLf1WMOom6PhzCjA 二、實現方法 1：構建環形鏈表 構建環形鏈表主要是為了無限迴圈子節點 環形鏈表數據結構與演算法裡面有 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類