高仿自如APP底部導航切換動畫效果

前言

最近盯上了自如APP，抽時間模仿實現了其底部導航切換動畫，其實我很忙的，也不知道在忙啥😉😉😉

正文

自如APP底部Tab切換效果用的是SVGA動畫，SVGA 是一種跨平台的開源動畫格式，同時兼容iOS/Android/Flutter/Web平台。SVGA的簡單使用可以參考以下方式：

在項目根目錄的build.gradle文件中添加：

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

在模塊目錄的build.gradle文件中添加：

implementation 'com.github.yyued:SVGAPlayer-Android:2.0.0'

在xml中定義SVGAImageView控件：

<com.opensource.svgaplayer.SVGAImageView
    android:id="@+id/svg_image_view"
    android:layout_width="32dp"
    android:layout_height="32dp"
    app:source="svga/tab_my_select.svga"
    app:autoPlay="false"
    app:loopCount="1"
    app:antiAlias="true"
 />

屬性	類型	默認值	說明
source	string	空	文件路徑，相對於assets目錄的路徑或者為url
autoPlay	boolean	true	是否自動播放動畫
loopCount	integer	0	動畫循環次數，0表示無限循環
antiAlias	boolean	false	畫筆是否抗鋸齒
clearsAfterStop	boolean	true	在動畫停止后是否清除畫布
fillMode	enum	Forward	取值為Forward或Backward，Forward表示動畫完成后將停留在最后一幀，Backward表示動畫完成后將停留在第一幀

在代碼中設置監聽器，然后播放動畫，如下：

svg_image_view.callback = object : SVGACallback {
    override fun onFinished() {
    }

    override fun onPause() {
    }

    override fun onRepeat() {
    }

    override fun onStep(frame: Int, percentage: Double) {
    }
}
svg_image_view.startAnimation()

布局文件分析

頁面	布局

• 底部每個Tab由SVGAImageView+ImageView+TextView組成。
• 當Tab未選中時，SVGAImageView隱藏，ImageView顯示未選中狀態下的圖片。
• 當Tab選中時，SVGAImageView顯示，ImageView先是不可見，然后播放SVGA動畫，播放完成后SVGAImageView隱藏，ImageView可見並顯示選中狀態下的圖片。

資源文件分析

解壓自如APP(7.2.8版本)，提取資源文件。

• SVGA資源文件
  位於assets\svga目錄下，可以直接把SVGA文件拖到svga特效在線預覽網站查看效果。

首頁	找房	發現生活	業主委托	我的
tab_home_select.svga	tab_search_select.svga	tab_service_select.svga	tab_lvju.select.svga	tab_my_select.svga

• 靜態圖片文件

因自如APP對res目錄下的圖片資源做了處理，原來的圖片文件名字已經替換成a.png，b.png這樣的字符串，可讀性很差，我整理了一下，如下：

首頁1	首頁2	找房1	找房2	發現生活1

發現生活2	業主委托1	業主委托2	我的1	我的2

代碼實現

代碼就不貼了，完整的代碼已經上傳GitHub，地址為：https://github.com/kongpf8848/Animation，該項目包含了豐富的動畫示例(逐幀動畫，補間動畫，Lottie動畫，GIF動畫，SVGA動畫)