如何使用ObjectAnimator为BottomNavigationView菜单项图标添加动画效果

Question

如何使用ObjectAnimator为BottomNavigationView菜单项图标添加动画效果

9

我正在使用Android Support Design的BottomNavigationView来实现底部选项卡导航。

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/main_nav"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:labelVisibilityMode="unlabeled"
        app:itemIconSize="40dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/blue_active"
        app:menu="@menu/nav_items">


    </android.support.design.widget.BottomNavigationView>

我的目标是：

通过使用 ObjectAnimator 在选项卡（菜单）被按下时以编程方式实现图标动画

这是菜单：

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="@string/nav_home" />
    <item
        android:id="@+id/nav_games"
        android:icon="@drawable/games"
        android:title="@string/nav_games" />
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/profile"
        android:title="@string/nav_profile" />
</menu>

代码：

 mMainNav.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> {

                   //item.icon is drawable
                   var myAnimation =  ObjectAnimator.ofFloat(item.icon,"rotation",0f,360f)
                    myAnimation.duration = 500


                    myAnimation.start()  //nothing happens
                    setFragment(HomeFragment)

                    true
                }

这样做没有任何动画效果。

问题出在哪里？我应该使用另一种方式进行动画，还是我只是应用不正确？

我尝试使用图标绘制的imageview进行动画，然后将其设置为items actionview，但这也不起作用（会发生一些反应，但会产生一些不相关的奇怪行为）。

 var drawable = applicationContext.getDrawable(R.drawable.ic_home)
                    var someImageView = ImageView(this)
                    someImageView.setImageDrawable(drawable)

                   var myAnimation =  ObjectAnimator.ofFloat(someImageView,"rotation",0f,100f)
                    myAnimation.duration = 2000


                    myAnimation.start()
                    item.actionView = someImageView

赏金链接已经失效，请检查以下链接：https://streamable.com/99pa8。

- lastpeony4

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hardik Talaviya · Accepted Answer

请尝试以下解决方案

步骤1

使用ShapeShifter创建动画矢量图形，并从Android Studio将其导入到Android项目中，然后将其放置在src/res/drawable下。

步骤2

为底部导航视图中的每个图标创建一个带动画状态列表的Drawable。

anim_settings.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    tools:targetApi="16">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/state_on"
        android:drawable="@drawable/ic_settings_active_avd"
        android:state_checked="true"/>

    <item android:id="@+id/state_off"
        android:drawable="@drawable/ic_settings_inactive"/>

    <!-- specify transitions -->
    <transition
        android:drawable="@drawable/ic_settings_active_avd"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />

</animated-selector>

步骤 - 3

使用这个动画状态列表作为图标。

menu_bottom_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_settings_fragment"
        android:icon="@drawable/anim_settings"
        android:title="@string/settings"
        app:showAsAction="always" />
...
</menu>

步骤 - 4

将menu_bottom_nav.xml设置为底部导航视图的菜单(menu)。

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:showAsAction="always|withText"
        app:itemTextColor="@drawable/bottom_navigation_tab_selector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/menu_bottom_nav"
        android:background="@color/colorWhite"
        app:elevation="0dp"/>

现在在您的设备上运行安卓应用程序并检查底部导航栏动画。

更多详细信息请参考此链接：这里。

希望这可以帮到您！