前言

最近抽時間模仿實(shí)現(xiàn)了自如APP的底部導(dǎo)航切換動畫，其實(shí)我很忙的，也不知道在忙啥??????

仿自如APP底部導(dǎo)航動畫.gif

正文

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

在項(xiàng)目根目錄的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"
 />

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

在代碼中設(shè)置監(jiān)聽器，然后播放動畫，如下：

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()

布局文件分析

布局.png

底部每個Tab由SVGAImageView+ImageView+TextView組成。
當(dāng)Tab未選中時，SVGAImageView隱藏，ImageView顯示未選中狀態(tài)下的圖片。
當(dāng)Tab選中時，SVGAImageView顯示，ImageView先是不可見，然后播放SVGA動畫，播放完成后SVGAImageView隱藏，ImageView可見并顯示選中狀態(tài)下的圖片。