android - 如何使用 ObjectAnimator 为 BottomNavigationView 菜单项图标设置动画

Question

我正在使用 android 支持设计 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 设置动画，然后将其设置为项目操作 View ，但这也不起作用。(发生一些 react ，但会产生一些不相关的奇怪行为)

 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

Answer 1

尝试以下解决方案

步骤 - 1

创建 动画矢量可绘制 使用 ShapeShifter并将这个动画矢量drawable从Android Studio导入到您的Android项目中，并将其放置在src/res/drawable中.

步骤 - 2

创建 动画状态列表 Drawable 对于底部导航 View 中的每个图标。

动画设置.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 作为 菜单 用于底部导航 View 。

<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"/>

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

更多详情请关注 this关联。

我希望这可以帮助你!