带有Lottie的动画问题Android BottomNavigationView

时间:2020-06-10 20:31:08

标签: android bottomnavigationview lottie-android

我试图将BottomNavigationView与lib Lottie一起使用,以制作图标动画。我宁愿使用Lottie代替VectorAndroidAnimation,因为我想要更复杂的动画。但是,当我单击它们时,BottomNavigationView的第一项不会进行动画处理,而其他项会进行动画处理

(下面是Gif)

[包含三项-https://i.stack.imgur.com/3Gput.gif]

我的代码下面:

 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)

[有两项-https://i.stack.imgur.com/Z5TiW.gif]

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

[有五个项目-https://i.stack.imgur.com/hxRE0.gif]

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,这是一场噩梦..但是我终于找到了解决方法!

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

            ...
            // 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
            )
            ...