分多種情況：

1、如果是給 gif ：

首先交互上的要求：觸發機制簡單，下拉靜態，鬆手播放。

背景要求：如果播放背景是純色，用 gif 完全ok，輸出 gif 時記得把雜邊設置成背景顏色；如果播放背景複雜或者顏色不固定，別用 gif 了，丑。

大小長度要控制：尺寸不大，長度不長，文件不大。

動畫複雜度：可以有複雜的形變和特效。同時光效不多，顏色漸變不多。

前端實現：播放就完事。

2、給 Lottie 動畫規範的 json：

交互上：支持下拉隨高度變化播放到指定幀，鬆手繼續播放。

動畫複雜度：能導出 json 隨便折騰。

前端實現：有 Lottie 動畫庫。

3、SVGA格式：

交互上：和 gif 一樣，下拉靜止，鬆手播放。下拉播放指定幀：沒用過官方解析庫，不清楚。

動畫複雜度要求：簡單圖片動畫，無AE特效，無複雜形變。

前端實現：有 svga 解析庫。

4、給PNG序列幀動畫：

交互上：同樣支持下拉高度與播放進度綁定，鬆手繼續播放。

大小長度要控制：尺寸不大，長度不長，幀數輸出不多。

動畫複雜度：可以hold住複雜光效，各種AE效果

前端實現：適用於前端用不了 Lottie 庫的時候，實現難度不大。

以上

一般來講給json文件是最好的，因為gif會有不同程度的失真，而且gif圖片文件的會佔更多的內存，可能相同的圖，gif會達到幾百k或者幾m但是json一般裡面都是代碼生成好的體量會小很多，而且如果只是單單移動端或者web端用json完全足夠，而且能保證動效不失真，而且同時內存佔比也小不容易卡頓，所以更推薦json

要看你做的效果是什麼樣的。

1、如果只是簡單的表現狀態的循環動畫，gif就或序列幀就可以。當然也可以循環的SVGA和Lottie，看性能和實現成本了。

例如下拉過程循環播放動畫a，刷新循環播放動畫b。

另外，gif邊緣可能有鋸齒，或加底色雜邊，底色是純色才適合用，一般建議序列幀。

2、下拉刷新的交互，下拉過程中有隨動作幅度變化的動畫的，gif並不能實現，給json或SVGA或標註給開發或其他方式。

例如下拉200dp觸發刷新，在下拉1dp-199dp間，隨下拉高度變化播放動畫進度的0%-100%。這類肯定是gif不能滿足的，需要給其他格式。

格式上，看到樓上有提到Lottie，我補充下，SVGA也可以的，開發可以指定播放SVGA中的幀。也就是可以實現隨下拉高度變化播放動畫中指定幀。

其實，可以把下拉刷新動畫拆解一下：按住下拉、下拉過程、鬆手或觸發刷新、刷新loading。這樣你就清楚哪裡適合放gif這種循環動畫，哪些地方不適合。

PS，還是要和客戶端開發同學多多溝通，具體實現找他們溝通清楚才是王道。

一般是給svg誒，動畫效果是前端自己寫，UI出效果演示

看你的動畫內容具體分析用哪種

但總體說gif有太多缺陷，有自身缺陷的白邊，不可控的動畫進程，只有256色

很多時候我們根據情況，用json，svga，開發手寫，png序列，視頻格式等

我們公司前端每次都是要json的

如果要求沒那麼高，網上找開源的代碼就好了，多了去了

下拉刷新代碼好實現的

推薦閱讀：
相关文章