前言
最近抽时间模仿实现了自如APP的底部导航切换动画，其实我很忙的，也不知道在忙啥😉😉😉
仿自如APP底部导航动画.gif
正文
自如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()
布局文件分析
布局.png
- 底部每个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 |
|---|---|---|---|---|
 1.png
|
 2.png
|
 3.png
|
 4.png
|
 5.png
|
| 发现生活2 | 业主委托1 | 业主委托2 | 我的1 | 我的2 |
|---|---|---|---|---|
 6.png
|
 7.png
|
 8.png
|
 9.png
|
 10.png
|
代码实现
代码就不贴了，完整的代码已经上传GitHub，地址为：https://github.com/kongpf8848/Animation，该项目包含了丰富的动画示例(逐帧动画，补间动画，Lottie动画，GIF动画，SVGA动画)
| 闪屏页 | 引导页 | 汽车之家 | 京东到家 |
|---|---|---|---|
 闪屏页
|
 引导页
|
 汽车之家
|
 京东到家
|
