Lottie - 輕鬆實現複雜的動畫效果

時間  2019-11-07
標籤 lottie 輕鬆 實現 複雜 動畫 效果 简体版
原文   原文鏈接

1. Lottie 介紹

Lottie 是 Airbnb 開源的一套跨平臺的完整的動畫效果解決方案，設計師可使用 Adobe After Effects 設計出漂亮的動畫以後，使用 Lottic 提供的 Bodymovin 插件將設計好的動畫導出成 JSON 格式，就能夠直接運用在 iOS、Android、Web 和 React Native之上，無需其餘額外操做。html

Lottie 相關網站：java

2. Lottie 使用

Lottie 支持 Jellybean (API 16) 及以上版本。最簡單的使用方式是直接使用 LottieAnimationView， LottieAnimationView 直接繼承自 AppCompatImageView 。react

2.1 Lottie 依賴

Gradle 是惟一支持的構建配置，因此只須要在項目的 build.gradle 文件中添加依賴便可:android

dependencies {
  implementation "com.airbnb.android:lottie:$lottieVersion"
}
複製代碼

最新版本是： ios

2.2 Lottie 核心類

  • LottieAnimationView：繼承自 AppCompatImageView，是加載 Lottie 動畫的默認和最簡單的方式。
  • LottieDrawable：具備大多數與 LottieAnimationView 相同的 API，所以能夠在任何視圖上使用它。

2.3 加載動畫

Lottie 支持 Jellybean (API 16) 及以上版本。Lottie 動畫支持從如下位置加載動畫：git

  • src/main/res/raw 中的 json 動畫。
  • src/main/assets 中的 json 文件。
  • src/main/assets 中的 zip 文件。有關詳細信息，請參閱 images docs。
  • json 或 zip 文件的 Url。
  • json 字符串。源能夠來自任何東西，包括本身的網絡堆棧。
  • json 文件或 zip 文件的 InputStream。

2.3.1 在 XML 中使用

最簡單的使用方法是使用 LottieAnimationView。Lottie 支持加載來自 res/raw 或 assets/ 的動畫資源。建議使用 res/raw，由於能夠對動畫經過 R 文件使用靜態引用，而不僅是使用字符串名稱。這也能夠幫助構建靜態分析，由於它能夠跟蹤動畫的使用。程序員

LottieAnimationView 的經常使用屬性及其功能以下：github

屬性 功能
lottie_fileName 設置播放動畫的 json 文件名稱
lottie_rawRes 設置播放動畫的 json 文件資源
lottie_autoPlay 設置動畫是否自動播放(默認爲false)
lottie_loop 設置動畫是否循環(默認爲false)
lottie_repeatMode 設置動畫的重複模式(默認爲restart)
lottie_repeatCount 設置動畫的重複次數(默認爲-1)
lottie_cacheStrategy 設置動畫的緩存策略(默認爲weak)
lottie_colorFilter 設置動畫的着色顏色(優先級最低)
lottie_scale 設置動畫的比例(默認爲1f)
lottie_progress 設置動畫的播放進度
lottie_imageAssetsFolder 設置動畫依賴的圖片資源文件地址

在 res/raw (lottie_rawRes) 或 assets/ (lottie_fileName) 中存放動畫的 JSON 文件，而後就能夠在 xml 中直接使用，以下：web

<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_rawRes="@raw/hello_world" // or app:lottie_fileName="hello_world.json" app:lottie_loop="true" app:lottie_autoPlay="true" />
複製代碼

2.3.2 在代碼中使用

LottieAnimationView 的經常使用方法及其功能以下：json

方法 功能
setAnimation(String) 設置播放動畫的 json 文件名稱
setAnimation(String, CacheStrategy) 設置播放動畫的 json 文件資源和緩存策略
setAnimation(int) 設置播放動畫的 json 文件名稱
setAnimation(int, CacheStrategy) 設置播放動畫的 json 文件資源和緩存策略
loop(boolean) 設置動畫是否循環(默認爲false)
setRepeatMode(int) 設置動畫的重複模式(默認爲restart)
setRepeatCount(int) 設置動畫的重複次數(默認爲-1)
lottie_cacheStrategy 設置動畫的緩存策略(默認爲weak)
lottie_colorFilter 設置動畫的着色顏色(優先級最低)
setScale(float) 設置動畫的比例(默認爲1f)
setProgress(float) 設置動畫的播放進度
setImageAssetsFolder(String) 設置動畫依賴的圖片資源文件地址
playAnimation() 從頭開始播放動畫
pauseAnimation() 暫停播放動畫
resumeAnimation() 繼續從當前位置播放動畫
cancelAnimation() 取消播放動畫

若是不想用 xml 實現，能夠經過代碼來實現，能夠直接加載本地動畫資源，也能夠從網絡請求加載動畫。

  • 從 res/raw 或 assets/ 加載動畫資源：
LottieAnimationView animationView = ...

animationView.setAnimation(R.raw.hello_world);
// or
animationView.setAnimation(R.raw.hello_world.json);

animationView.playAnimation();
複製代碼

該方法在後臺加載文件並解析動畫，並在完成後異步開始渲染。

  • 從網絡請求加載動畫： Lottie 的一個優勢是能夠從網絡請求加載動畫。因此，應該將網絡請求的響應內容轉換爲字符串格式。Lottie 使用一個流化的 json 反序列化器來提升性能和內存使用率，因此不要將它轉換成您本身的 JSONObject，這隻會損害性能。
LottieAnimationView animationView = ...
// This allows lottie to use the streaming deserializer mentioned above.
JsonReader jsonReader = new JsonReader(new StringReader(json.toString()));
animationView.setAnimation(jsonReader);
animationView.playAnimation();
複製代碼

2.4 Lottie 的緩存策略

你的應用程序中可能會有一些常用的動畫，好比加載動畫等等。爲了不每次加載文件和發序列化的開銷，你能夠在你的動畫上設置一個緩存策略。上面全部的 setAnimation APIs均可以採用可選的第二個參數 CacheStrategy。在默認狀況下，Lottie 將保存對動畫的弱引用，這對於大多數狀況來講應該足夠了。可是，若是肯定某個動畫確定會常用，那麼請將其緩存策略更改成 CacheStrategy.Strong；或者若是肯定某個動畫很大並且不會常用，把緩存策略改爲 CacheStrategy.None。

CacheStrategy 能夠是None、Weak 和 Strong 三種形式來讓 LottieAnimationView 對加載和解析動畫的使用強或弱引用的方式。弱或強表示緩存中組合的 GC 引用強度。

2.5 直接使用 LottieDrawable

LottieAnimationView 是基於 LottieDrawable 的一個包裝好的 ImageView 。LottieAnimationView 上的全部 API 都在 LottieDrawable 上進行鏡像，所以能夠建立本身的實例並在任何可使用drawable的地方使用它，例如自定義 View 或菜單。

2.6 使用 LottieComposition 去預加載動畫

動畫的支持模型是 LottieComposition。在大多數狀況下，在 LottieAnimationView 或 LottieDrawable 上調用 setAnimation(…) 便足夠了。可是，若是要預加載動畫以使其當即可用，則可使用 LottieComposition.Factory API返回能夠直接在 LottieAnimationView 或 LottieDrawable 設置的 LottieComposition 對象。一樣，一般不須要本身添加管理 compositions 的開銷。LottieAnimationView 中的默認緩存足以知足大多數用例的須要。

LottieAnimationView animationView = ...;
 ...
 Cancellable compositionLoader = LottieComposition.Factory.fromJsonString(getResources(), jsonString, (composition) -> {
     animationView.setComposition(composition);
     animationView.playAnimation();
 });

 // Cancel to stop asynchronous loading of composition
 // compositionCancellable.cancel();
複製代碼

2.7 動畫監聽

animationView.addAnimatorUpdateListener((animation) -> {
    // do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
    // do something.
}
...
animationView.setProgress(0.5f);
...
複製代碼

在更新偵聽器回調中：

  • animation.getAnimatedValue() 將返回動畫的播放進度，而不考慮當前設置的最小/最大幀[0,1]。
  • animation.getAnimatedFraction() 將返回動畫的播放進度，同時考慮設置的最小/最大幀[minFrame，maxFrame]。

2.8 控制 Lottie 動畫執行的速度和時長

儘管 playAnimation() 對於絕大多數用例來講已足夠，但能夠在更新回調中調用 setProgress(...) 方法爲本身的動畫設置進度。

// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
複製代碼

2.9 循環播放

能夠像使用 ValueAnimator 同樣經過 setRepeatMode(...) 或 setRepeatCount(...) 方法控制動畫的循環播放，或者你直接在 xml 中使用 lottie_loop="true" 開啓循環播放。

2.10 動畫尺寸（px vs dp）

Lottie 將 After Effects 中的全部 px 值轉換爲設備上的 dps，以便在設備上以相同的大小呈現全部內容。這意味着它不是在 After Effects 中製做1920x1080的動畫，而是在After Effects中更像411x731px，它大體對應於當今大多數手機的dp屏幕尺寸。

可是，若是您的動畫不是完美尺寸，則有兩種選擇：

2.10.1 ImageView scaleType

LottieAnimationView 是一個包裝好的 ImageView，它支持 centerCrop 和 centerInside，因此能夠像使用其餘 image 同樣使用這兩個工具方法。

2.10.2 Lottie setScale(...)

LottieAnimationView 和 LottieDrawable 都有 setScale(float) API，可使用它來手動放大或縮小動畫。這不多有用，但能夠在某些狀況下使用。

若是動畫執行緩慢，請務必查看有關性能的文檔。可是，能夠嘗試使用 scaleType 縮放動畫，這將減小 Lottie 每幀渲染的數量。若是你有大的 mask 和 mattes，這將特別有用。

2.11 播放動畫片斷

播放/循環動畫的單個部分一般很方便。例如，動畫的前半部分可能處於「開啓」狀態，下半部分處於「關閉」狀態。LottieAnimationView 和 LottieDrawable 有用於控制當前段的 API：

setMinFrame(...)

setMaxFrame(...)

setMinProgress(...)

setMaxProgress(...)

setMinAndMaxFrame(...)

setMinAndMaxProgress(...)
複製代碼

循環API將遵循此處設置的最小/最大幀。

3. 原理介紹

3.1 Lottie 動畫 Json 文件結構

Lottie動畫Json結構分爲4層：

  1. 結構層：能夠讀取到動畫畫布的寬高，幀數，背景色，時間，起始關鍵幀，結束幀等信息。
  2. asset：圖片資源信息集合，這裏放置的是 製做動畫時引用的圖片資源。
  3. layers：圖層集合，這裏能夠獲取到多少圖層，每一個圖層的開始幀 結束幀等。
  4. shapes：元素集合，能夠獲取到每一個圖層都包含多個動畫元素。

3.2 Lottie 分層渲染原理

LottieComposition 負責將 json 文件解析成數據對象， LottieDrawable 負責將 LottieComposition 解析的對象 繪製成 drawable 顯示在 View 上。

3.3 Lottie 動畫運行流程圖

4. 使用準備

4.1 下載安裝 After Effects

After Effects
下載並安裝最新版本的 Adobe After Effects。

下載地址：www.adobe.com/cn/products…

4.2 下載安裝 Bodymovin

Bodymovin
下載並安裝最新版本的 After Effects Bodymovin Extension。

  1. 若是打開，關閉 After Effects；

  2. 安裝 ZXP Installer 安裝程序；

下載地址：aescripts.com/learn/zxp-i…

  1. 下載最新的 bodymovin 擴展；

下載地址：github.com/airbnb/lott…

bodymovin

  1. 打開 ZXP Installer 並將 bodymovin 擴展名拖到窗口中；

  2. 打開 After Effects。

在「Window> Extensions」菜單下，您應該看到「Bodymovin」

4.3 Lottiefiles 示例應用程序

Lottiefiles
能夠本身構建示例應用程序，也能夠從 Google Play 或 App Store 上下載 Lottie 示例應用程序。示例應用程序包含一些內置動畫，但也容許您從內部存儲或從 url 加載動畫。

在完成這三件事以後，請在 SVG / Sketch 到 Lottie 演練 或 Illustrator 到 Lottie 演練 中查看一些工做流程概述。

5 LottieFiles

LottieFiles 提供了不少設計師上傳的 Lottie 動畫，並提供預覽的效果，而且能夠直接下載成 JSON ，或者生成二維碼，可供 Lottie App 掃描看效果，很是的方便。

LottieFiles：www.lottiefiles.com/

Lottie-editor：github.com/sonaye/lott…

LottieFiles

LottieFiles 自己已經支持使用 Lottie-editor 去編輯動畫。若是須要對某個動畫進行修改，只須要在動畫的預覽界面，點擊右上角的 Customize with Bodymovin Editor，便可直接對該動畫進行編輯。

6. 致謝

  1. airbnb.io/lottie
  2. 程序員也想改 Lottie 動畫？是的！
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程