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

最新推荐文章于 2024-04-29 06:52:17 发布

weixin_38754349

最新推荐文章于 2024-04-29 06:52:17 发布

阅读量300

点赞数

文章标签： css android html ios app

原文链接：https://www.jianshu.com/p/7a544cf34bcf

版权

code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群

作者：孔鹏飞
链接：https://www.jianshu.com/p/7a544cf34bcf
声明：本文已获孔鹏飞授权发表，转发等请联系原作者授权

前言

最近抽时间模仿实现了自如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"
 />

在代码中设置监听器，然后播放动画，如下：

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可见并显示选中状态下的图片。