android - 动画问题 Android BottomNavigationView with Lottie

标签 android bottomnavigationview lottie

我正在尝试将 BottomNavigationView 与 lib Lottie 结合使用以制作图标动画。我宁愿使用 Lottie 而不是 VectorAndroidAnimation,因为我想要更复杂的动画。但是 BottomNavigationView 的第一项没有动画,当我点击它们时其他项目有动画

(下面的动图)

with three items

下面是我的代码:

 class MainActivity : AppCompatActivity(), BottomNavigationView.OnNavigationItemSelectedListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val navView: BottomNavigationView = findViewById(R.id.nav_view)

        navView.menu.apply {
            add(Menu.NONE, 0, Menu.NONE, R.string.title_home).icon = getLottieDrawable(
                LottieAnimation.HOME,
                navView
            )
            add(Menu.NONE, 1, Menu.NONE, R.string.title_dashboard).icon = getLottieDrawable(
                LottieAnimation.CALENDAR,
                navView
            )
            add(Menu.NONE, 2, Menu.NONE, R.string.title_notifications).icon = getLottieDrawable(
                LottieAnimation.BELL,
                navView
            )
        }

        navView.setOnNavigationItemSelectedListener(this)
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        val icon = item.icon as? LottieDrawable
        icon?.apply {
            playAnimation()
        }
        return true
    }

    private fun getLottieDrawable(
        animation: LottieAnimation,
        view: BottomNavigationView
    ): LottieDrawable {
        return LottieDrawable().apply {
            val result = LottieCompositionFactory.fromAssetSync(
                view.context.applicationContext, animation.value
            )
            callback = view
            composition = result.value
        }
    }

}

enum class LottieAnimation(val value: String) {
    HOME("home.json"),
    CALENDAR("calendar.json"),
    BELL("bell.json")
} 

仅对 BottomNavigationView 中的两个项目进行了测试,并且选项卡的第一个项目是动画的

(下面两个项目的 Gif)

with Two items

最后我在 BottomNavigationView 中测试了五个项目,在这个测试中,第一个和第二个项目在点击时没有动画,只有选项卡上的最后三个项目

with five items

最佳答案

如何使用自定义底部导航 View 。您可以在每个选项卡中添加一个 Lottie View ,该 View 在单击时启动动画。根据我的经验,自定义底部导航 View 比使用 Android 的底部导航 View 更适合我。

关于android - 动画问题 Android BottomNavigationView with Lottie,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62312586/

相关文章:

lottie - 如何在不提供路径的情况下直接使用 JSON 内容加载 lottie-web 动画

android - 如何在 Android Jetpack Compose 中为 Lottie 动画使用动画监听器?

android - CollapsingToolbarLayout setTitle() 不会更新,除非折叠

Android 应用程序在 XMl 解析时不断崩溃

android - 当我连接网络时,如何重新启动我当前的 Activity ?

android - 使底部导航 View 背景透明

android - 使用 android BottomNavigationView 时保存 fragment 状态

Flutter:点击时底部导航栏上选定的图标不会改变

java - 为数组生成随机索引

javascript - 使用按钮启动和停止乐透播放器/动画