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

前语

最近盯上了自若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"
/>
特点 类型 默认值 说明
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()

布局文件分析

页面 布局
image.png image.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
tab_home_normal.webp tab_home_selected.webp tab_yu_normal.webp tab_yu_selected.webp tab_service_normal.webp
发现生活2 业主托付1 业主托付2 我的1 我的2
tab_service_selected.webp tab_lvju_normal.webp tab_lvju_selected.webp tab_my_normal.webp tab_my_selected.webp

代码完成

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

闪屏页 引导页 京东到家 Telegram贴纸
splash.webp guide.webp pdj_guide.webp telegram.webp

发表评论

提供最优质的资源集合

立即查看 了解详情