高仿自如APP底部导航切换动画效果

3,694 阅读2分钟

前言

最近盯上了自如APP,抽时间模仿实现了其底部导航切换动画,其实我很忙的,也不知道在忙啥😉😉😉

ziroom.webp

正文

自如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"
 />
属性类型默认值说明
sourcestring文件路径,相对于assets目录的路径或者为url
autoPlaybooleantrue是否自动播放动画
loopCountinteger0动画循环次数,0表示无限循环
antiAliasbooleanfalse画笔是否抗锯齿
clearsAfterStopbooleantrue在动画停止后是否清除画布
fillModeenumForward取值为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()

布局文件分析

页面布局
image.pngimage.png
  • 底部每个Tab由SVGAImageView+ImageView+TextView组成。
  • 当Tab未选中时,SVGAImageView隐藏,ImageView显示未选中状态下的图片。
  • 当Tab选中时,SVGAImageView显示,ImageView先是不可见,然后播放SVGA动画,播放完成后SVGAImageView隐藏,ImageView可见并显示选中状态下的图片。

资源文件分析

解压自如APP(7.2.8版本),提取资源文件。

首页找房发现生活业主委托我的
tab_home_select.svgatab_search_select.svgatab_service_select.svgatab_lvju.select.svgatab_my_select.svga
  • 静态图片文件

因自如APP对res目录下的图片资源做了处理,原来的图片文件名字已经替换成a.png,b.png这样的字符串,可读性很差,我整理了一下,如下:

首页1首页2找房1找房2发现生活1
tab_home_normal.webptab_home_selected.webptab_yu_normal.webptab_yu_selected.webptab_service_normal.webp
发现生活2业主委托1业主委托2我的1我的2
tab_service_selected.webptab_lvju_normal.webptab_lvju_selected.webptab_my_normal.webptab_my_selected.webp

代码实现

代码就不贴了,完整的代码已经上传GitHub,地址为:github.com/kongpf8848/…,该项目包含了丰富的动画示例(逐帧动画,补间动画,Lottie动画,GIF动画,SVGA动画)

闪屏页引导页京东到家Telegram贴纸
splash.webpguide.webppdj_guide.webptelegram.webp