前语

最近盯上了自若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可见并显现选中状态下的图片。