时间戳

首页 > 解决方案 > 动画问题 Android BottomNavigationView with Lottie

android - 动画问题 Android BottomNavigationView with Lottie

问题描述

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

（下图）

三项

下面是我的代码：

 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）

有两个项目

最后我在底部导航视图中测试了五个项目，在这个测试中，第一个和第二个项目在单击时没有动画，只有选项卡上的最后三个项目

有五个项目

标签： androidbottomnavigationviewlottie

解决方案

我遇到了同样的问题，这是一场噩梦......但我终于找到了解决方案！

您必须在全部添加后设置菜单项的图标。执行第一个循环以添加您的项目，然后执行第二个循环以设置每个全新菜单项的图标。

...
// First you add them ALL
add(Menu.NONE, 0, Menu.NONE, R.string.title_home)
add(Menu.NONE, 1, Menu.NONE, R.string.title_dashboard)
add(Menu.NONE, 2, Menu.NONE, R.string.title_notifications)

// Then you update their icons
findItem(0).icon = getLottieDrawable(
    LottieAnimation.HOME,
    navView
)
findItem(1).icon = getLottieDrawable(
    LottieAnimation.CALENDAR,
    navView
)
findItem(2).icon = getLottieDrawable(
    LottieAnimation.BELL,
    navView
)
...

推荐阅读