點(diǎn)擊“搜狗測試”可關(guān)注我們！

【一、前言Lottie簡介與使用】

?1、Lottie簡介

Lottie是Airbnb開源的跨平臺動畫庫，支持iOS、Android、React Native?和Web?等平臺。它可以解析使用Bodymovin?導(dǎo)出為json?的Adobe After Effects?動畫，允許應(yīng)用程序像使用靜態(tài)圖像一樣輕松使用動畫。

Android庫地址：https://github.com/airbnb/lottie-android

iOS庫地址：https://github.com/airbnb/lottie-ios

Lottie資源庫：https://lottiefiles.com/

2、Lottie的使用流程

(1). ??動效設(shè)計(jì)人員在Adobe After Effects中設(shè)計(jì)動畫；

(2). ??動效設(shè)計(jì)人員通過Adobe After Effects的Bodymovin插件導(dǎo)出記錄動畫信息的JSON文件；

(3). ??開發(fā)人員使用Lottie的開源庫讀取這份JSON文件進(jìn)行解析和渲染。

3、Lottie方案的優(yōu)點(diǎn)

(1). ?? 動畫由設(shè)計(jì)使用專業(yè)的動畫制作工具Adobe After Effects來實(shí)現(xiàn)，使動畫實(shí)現(xiàn)更加方便，動畫效果也更好，100% 還原。

(2). ??使用lottie方案，json文件大小會比gif文件小很多，性能也會更好。

(3). ?? 簡單的實(shí)現(xiàn)、控制動畫的播放，開發(fā)效率大大提高。

(4). ?? 可動態(tài)配置下發(fā)，實(shí)時替換動畫效果。

4、lottie-android 兩種引入方式

xml方式

編程方式

5、Lottie實(shí)現(xiàn)原理

Lottie使用通過Bodymovin插件導(dǎo)出的json文件作為動畫數(shù)據(jù)源，(json文件把圖片中的元素進(jìn)行來拆分，并且描述每個元素的動畫執(zhí)行路徑和執(zhí)行時間)。Lottie的讀取這些數(shù)據(jù)，然后繪制到屏幕上。首先要解析json，建立數(shù)據(jù)到對象的映射，然后根據(jù)數(shù)據(jù)對象創(chuàng)建合適的Drawable繪制到view上，動畫的實(shí)現(xiàn)可以通過操作讀取到的元素完成。具體過程如下所示

json文件——>Component——>Drawable——>View

通過如下3個核心類來來完成整個工作流程

(1).??? LottieComposition(json->數(shù)據(jù)對象)

Lottie使用LottieComposition來作為After Effects的數(shù)據(jù)對象，即把Json文件映射為到LottieComposition，該類中提供了解析json的靜態(tài)方法

(2).??? LottieDrawable(數(shù)據(jù)對象->Drawable)

繪制

Lottie 的核心是 LottieDrawable，它承載了所有的繪制工作，LottieAnimationView則是對LottieDrawable 的封裝，再附加了一些例如解析的功能。

(3).??? LottieAnimationView(繪制)

操作集合，LottieAnimationView繼承自 AppCompatImageView，封裝了一些動畫的操作，具體的繪制委托 LottieDrawable 完成的。

【二、內(nèi)存泄漏問題背景出現(xiàn)場景】

背景

輸入法錄音助手SDK測試，錄音助手SDK和輸入法進(jìn)程相互獨(dú)立。

問題場景

(錄音助手SDK)首頁和(輸入法)我的頁面切換，發(fā)現(xiàn)明顯的內(nèi)存增長趨勢。

問題修復(fù)插曲

開發(fā)同學(xué)的賬號和機(jī)器泄漏不明顯，修復(fù)其他內(nèi)存泄漏后，開發(fā)提交檢驗(yàn)；但測試同學(xué)機(jī)器和賬號內(nèi)存泄漏易復(fù)現(xiàn)，最終開發(fā)測試一同對比定位，復(fù)現(xiàn)。

問題修復(fù)

修復(fù)后，(助手SDK)首頁和(輸入法)我的頁面切換，最終退出SDK，可見內(nèi)存最終可以恢復(fù)平穩(wěn)，和起始內(nèi)存差異不大；助手SDK進(jìn)程的CPU占用0%。

【三、問題定位與分析】

結(jié)論：lottie本身的狀態(tài)處理有bug 導(dǎo)致泄漏了，MemoryLeak in LottieDrawable。

lottieview在detach的時候會停止動畫，如果無法停止，就會導(dǎo)致內(nèi)存泄漏。

小編場景分析：

進(jìn)首頁->退出，很有可能動畫還沒開始，就要被停止掉，所以就釋放不了資源。

代碼分析

lottie依賴onDetachedFromWindow停止動畫，動畫的play可能是異步的，在onDetachedFromWindow 中會判斷當(dāng)前是否在動畫中，如果在動畫中才會停止動畫，刪除異步任務(wù)，但此時可能并不再動畫中，但有一個已經(jīng)post出去的異步任務(wù)，在detach 后動畫會執(zhí)行。

加載動畫是異步的，加載完成才會進(jìn)入播放狀態(tài)。如果compositionLayer == null 的時候，會加入到task里，沒開始播放。

播放開始了running= true;

removeFrameCallback，running = false;

onDetachedFromWindow停止動畫

detach 處理時，先判斷是不是播放狀態(tài)，如果是播放狀態(tài)running == true，才會去 cancel。但有可能加載動畫完成發(fā)生在 detach 之后。

官方：Lottie的新版本修改了這個問題，但Lottie 3.0.0以上版本必須要項(xiàng)目支持android X。

評估：這個改動需要把所有第三方框架都進(jìn)行升級，對小編所在項(xiàng)目成本太高，暫不可行。

目前處理：重寫LottieAnimationView繼承，然后在ondetachedfromwindow里直接cancle。無論是否在動畫中都調(diào)用一次 cancelAnimation, 取消動畫，刪除可能存在的異步任務(wù)。

【參考】

Lottie 官方文檔：http://airbnb.io/lottie/

Lottie Github：https://github.com/airbnb/lottie-android

https://zhuanlan.zhihu.com/p/41339812

https://juejin.im/entry/58a324d12f301e00695da316

https://juejin.im/post/5a31ea836fb9a0451705367c

https://juejin.im/post/5d19fb53e51d45598611b9b6

歡迎添加我們的搜狗測試微信號，與我們一起聊聊測試。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的lottie动画_Lottie内存泄漏问题的定位与分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。