在最近的時間里，短視頻流行了起來捐韩，隨著這股潮流退唠，一種動圖封面的設計也被很多短視頻app采用：
而在app中，動圖的展示是比較消耗性能的操作荤胁，對于這種一頁非常多的動圖在展示時需要做對應的處理瞧预，今天我結(jié)合自己在項目中處理的經(jīng)驗分享一下多動圖的處理策略。
圖片加載框架選擇
對于動圖的加載寨蹋，尤其是webp格式的動圖松蒜，F(xiàn)resco真是不二的選擇扔茅，而且fresco本身對內(nèi)存的處理也很棒已旧，本文是基于Fresco 1.0.10版本，如果使用低版本Fresco出現(xiàn)無解的問題時召娜，不妨可以試著升級Fresco版本运褪。
圖片展示的策略
- 只在當前頁展示
我們知道，動圖是由一幀一幀的靜圖組成的玖瘸，通常來說我們需要這個動圖一直播放秸讹，也就是說動圖從加載完成之后會不停的渲染每一幀，拿某音舉例：
假設下面的“首頁”“雅倒、”關(guān)注”璃诀、“消息”、“我”4個tab都有動圖蔑匣，當我們點擊其他頁面時劣欢，當前頁被隱藏，而根據(jù)Fresco的官方文檔Fresco中文官方文檔通常只有當SimpleDrawView被移出屏幕才會停止播放動畫(我在測試中發(fā)現(xiàn)通常Activity生命周期級別的也會觸發(fā))裁良，所以當tab頁隱藏時動圖依舊在被渲染凿将，所以我們需要控制動圖的停止和播放，只有當前頁展示時价脾，才播放動圖：
Animatable animatable = mSimpleDraweeView.getController().getAnimatable();
if (animatable != null) {
animatable.start();
// later
animatable.stop();
}
- 只在可見區(qū)域展示
當我們做列表動圖的時候牧抵，無論控件是listview還是recyclerview，數(shù)據(jù)和item的綁定都會在屏幕外綁定，而此時站在性能優(yōu)化的角度上犀变，是不需要渲染動圖的妹孙；當動圖滑動在列表邊界的時候，是不是說明用戶的焦點已經(jīng)不在這張圖上了获枝，所以此時可以提前在動圖滑出屏幕外之前停止動圖播放（在項目中我與產(chǎn)品商定動圖播放和停止的邊界值定為圖片的1/2涕蜂，也就是說圖片滑入屏幕自身長度1/2的時候播放動圖，滑出屏幕自身長度1/2的時候停止播放）映琳；當快速滑動的時候也應當停止動圖渲染（平時加載靜圖可能不需要在意机隙，但是在android老手機上加載很多動圖會使得cpu和內(nèi)存大幅度浮動）。
也就是說當列表在做數(shù)據(jù)綁定的時候我們應當先去加載圖片但并不渲染動圖萨西，動圖播放和停止唯一的判斷標準是滑入滑出屏幕的長度有鹿，如果是快速滑動則無視第二個規(guī)則直接停止所有的動圖。
上面的第二谎脯、第三個處理會有些許的代碼量葱跋，而且重點是時機的判斷不是動圖的處理，這里著重講策略源梭，代碼就略過了娱俺。對于第一個處理，F(xiàn)resco本身是支持的：
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)
.setAutoPlayAnimations(false)
. // 其他設置（如果有的話）
.build();
setAutoPlayAnimations即表示是否在加載完成之后立即播放動圖废麻，這里設置為false即可荠卷，滑入播放調(diào)用上一張圖的方法就行了≈蚶ⅲ可是還有一種情況油宜，動圖在我們滑入的時候還沒有加載完成，那么我們就可以設置一個標示來表示是否播放怜姿，因為SimpleDrwaView是可以拿到動圖加載的回調(diào)的：
ControllerListener controllerListener = new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(
String id,
@Nullable ImageInfo imageInfo,
@Nullable Animatable anim) {
if (anim != null && tag == BEGAIN) {
// 其他控制邏輯
anim.start();
}
}
};
滑入屏幕時慎冤，就把tag 置為BEGAIN，滑出再置空就行了沧卢，并且這里我們不用擔心重復播放和停止的問題蚁堤，這里的anim對象其實是AnimatedDrawble2對象，而該對象在start和stop的時候都對狀態(tài)進行了判斷但狭。
圖片的規(guī)格尺寸
規(guī)格
相較于傳統(tǒng)的gif披诗，同質(zhì)量的webp體積更小，更能節(jié)省存儲空間熟空，但是在解碼上webp更為耗時藤巢，所以能用webp盡量用webp，實在還是卡再考慮用gif息罗。幀率
目前調(diào)研發(fā)現(xiàn)的動圖幀率一般是10幀或者20幀掂咒，幀率不要太高了，不然會加大cpu的占用率，其實如果Fresco的使用方式?jīng)]出問題绍刮，內(nèi)存的問題Fresco已經(jīng)幫你搞定了温圆，其他的優(yōu)化主要是針對cpu占用率優(yōu)化的。在項目中我們加載的動圖最后采用的是20幀（模仿騰訊謀產(chǎn)品的策略孩革，最好控制在10幀其實岁歉，這款騰訊的產(chǎn)品在一頁上展示的動圖明顯比其他同類型產(chǎn)品展示的數(shù)量少）。大小
動圖的大小也會影響解碼耗時膝蜈，在手機端可以使用小圖锅移，在項目中，我們手機端的動圖最多在200kb左右饱搏。
