Android從零擼美團(二) - 仿美團下拉重新整理自定義動畫
阿新 • • 發佈：2018-11-04
這是【從零擼美團】系列文章第二篇。 專案地址：github.com/cachecats/L…
今天寫了下拉重新整理，框架用的是 SmartRefreshLayout ，不為啥，因為 Github 上它有 9.5k 個 star，中文支援好節省時間。
先上圖：
一、分析
美團的下拉載入動畫初看挺簡單的，就一個賣萌的小人。細看的話還稍微有點複雜，一共有三個狀態。
- 剛開始下拉的時候，小腦袋從小變大的過程。
- 下拉到一定程度但還沒鬆手，小人翻了個跟頭直到完全出現。再往下拉保持最後完全出現的狀態。
- 鬆開後左右搖頭賣萌直至載入結束回彈回去。
這是三個動畫啊！真佩服這些大廠，簡單的載入動畫都搞這麼複雜。。
分析完過程該想怎麼實現了。
二、反編譯app看實現原理
最簡單直白的方法就是反編譯美團app，雖然看不到程式碼但資原始檔能還原出來，圖片和 xml 檔案完美還原。
反編譯工具是 apktool，使用方法官網上都有就不囉嗦了。
大部分圖片都放在 res/drawable-xhdpi-v4 和 res/drawable-xxhdpi-v4 兩個資料夾內，仔細找下能看到多張連續的 loading 圖片。這裡給美團程式猿點個贊，檔案命名都很規範，很好找~
看到圖片後知道原來它用的是最普通的幀動畫啊，也不是太複雜。 拿到資源圖片，知道實現原理，就開工吧！
三、實現動畫效果
首先自定義View CustomRefreshHeader 繼承自 LinearLayout，並實現 SmartRefreshLayout 的 RefreshHeader 介面。 然後主要就是重寫 RefreshHeader 介面中的方法，裡面提供了下拉重新整理時不同階段的回撥，找到對應的方法碼程式碼就好。
public class CustomRefreshHeader extends LinearLayout implements RefreshHeader {
private ImageView mImage;
private AnimationDrawable pullDownAnim;
private AnimationDrawable refreshingAnim;
private boolean hasSetPullDownAnim = false 邏輯主要在 onStateChanged() 和 onPullingDown() 方法裡，程式碼中註釋寫的很詳細。 切換狀態原理是每次都給 ImageView 設定對應的資源圖片或動畫檔案，然後得到 AnimationDrawable 開啟動畫，如下：
mImage.setImageResource(R.drawable.anim_pull_end);
pullDownAnim = (AnimationDrawable) mImage.getDrawable();
pullDownAnim.start();
複製程式碼程式碼中呼叫：
smartRefreshLayout.setRefreshHeader(new CustomRefreshHeader(getActivity()));
smartRefreshLayout.setOnRefreshLoadmoreListener(new OnRefreshLoadmoreListener() {
@Override
public void onLoadmore(RefreshLayout refreshlayout) {
Logger.d("onLoadmore");
smartRefreshLayout.finishLoadmore(2000, true);
}
@Override
public void onRefresh(RefreshLayout refreshlayout) {
Logger.d("onRefresh");
smartRefreshLayout.finishRefresh(2000, true);
}
});
複製程式碼貼出資源佈局檔案： widget_custom_refresh_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:gravity="center"
android:padding="5dp">
<ImageView
android:id="@+id/iv_refresh_header"
android:layout_width="41dp"
android:layout_height="54dp"
android:scaleX="0"
android:scaleY="0"
android:translationY="0dp" />
</LinearLayout>
複製程式碼anim_pull_end.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item
android:drawable="@drawable/commonui_pull_end_image_frame_01"
android:duration="100" />
<item
android:drawable="@drawable/commonui_pull_end_image_frame_02"
android:duration="100" />
<item
android:drawable="@drawable/commonui_pull_end_image_frame_03"
android:duration="100" />
<item
android:drawable="@drawable/commonui_pull_end_image_frame_04"
android:duration="100" />
<item
android:drawable="@drawable/commonui_pull_end_image_frame_05"
android:duration="100" />
</animation-list>
複製程式碼anim_pull_refreshing.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_01" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_02" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_03" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_02" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_05" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_06" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_07" />
<item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_06" />
</animation-list>
複製程式碼好啦，以上就是仿美團下拉重新整理自定義動畫的實現過程。 原始碼地址：github.com/cachecats/L…