作者：孔鵬飛
鏈接：https://www.jianshu.com/p/7a544cf34bcf

前言

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

正文

自如APP底部Tab切換效果用的是SVGA動畫，SVGA 是一種跨平臺的開源動畫格式，同時(shí)兼容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"
 />

在代碼中設(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()

布局文件分析

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

資源文件分析

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

• SVGA資源文件 位于assets\svga目錄下，可以直接把SVGA文件拖到svga特效在線預(yù)覽網(wǎng)站查看效果。

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

代碼實(shí)現(xiàn)

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

推薦閱讀

                  

                   

                    

                     

                      

                       
? 耗時(shí)2年，Android進(jìn)階三部曲第三部《Android進(jìn)階指北》出版！
                       
? 『BATcoder』做了多年安卓還沒編譯過源碼？一個(gè)視頻帶你玩轉(zhuǎn)！
                       
? 『BATcoder』我去！安裝Ubuntu還有坑？
                       
? 重生！進(jìn)階三部曲第一部《Android進(jìn)階之光》第2版 出版！
                      
                     
                    
                   
                  

          

             微信改了推送機(jī)制，真愛請星標(biāo)本公號??