为 BottomNavigationView 上的选定图标设置动画

Question

当像 this Material Product Study for the Owl app 中那样选择一个选项卡时，我正在考虑为我当前在 BottomNavigationView 中使用的 VectorDrawables 设置动画。然而，与工具栏视图不同的是，当我使用 MenuItem.getIcon() 获取图标时，将其转换为 AnimatedVectorDrawable 并调用 animate() 方法，没有动画。

我想知道我是否可以做些什么来实现这一点，如果这可能包含在稳定的 Material 组件库中，或者我是否最好创建一个扩展 BottomNavigationView 的自定义视图 class.

Answer 1

目前无法在 BottomNavigationView 中使用动画图标。我们已经在内部提交了此功能请求，但取消了相关工作的优先级。

如果您想帮助增加支持，我们很乐意在 https://github.com/material-components/material-components-android

接受 pr

Answer 2

我们可以使用以下代码为 bottomnavigationview 图标设置动画：

bottomNavigationId.menu.getItem(i).icon  =  
AnimatedVectorDrawableCompat.create(this, R.drawable.ic_settings_active_avd)
val anim = bottomNavigationId.menu.getItem(i).icon as Animatable
anim.start()

但这不起作用 api > 24 因此，更好的方法是创建一个 AnimatedStateListDrawable，其中 AVD 是用于 android:state_checked="true" 的转换。然后你可以将它设置为 MenuItem 上的可绘制对象，它会运行选中该项目时的 AVD。

例如：

<?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">
    <item android:id="@+id/state_on"
       android:drawable="@drawable/ic_settings_active"
       android:state_checked="true"/>
    <item android:id="@+id/state_off"
       android:drawable="@drawable/ic_settings_inactive"/>
    <transition
       android:drawable="@drawable/ic_settings_active_avd"
       android:fromId="@id/state_off"
       android:toId="@id/state_on" />
  </animated-selector>

使用这个可绘制的动画状态列表作为菜单中的图标

 <?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>

查看下方 link 以完整了解带动画可绘制对象的 bottomnavigationview

https://medium.com/@naththeprince/delightful-animations-in-android-d6e9c62a23d3

Answer 3

使用 Shape Shifter 使动画矢量可绘制
在 build.gradle(Module:app)
中添加这一行
默认配置{ vectorDrawables.useSupportLibrary = 真 }

制作 Drawable 选择器文件 - selector_search.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="16">
    <item
        android:id="@+id/state_on"
        android:drawable="@drawable/avd_search"
        android:state_checked="true" />
    <item
        android:id="@+id/state_off"
        android:drawable="@drawable/icon_search" />
    <transition
        android:drawable="@drawable/avd_search"
        android:fromId="@id/state_off"
        android:toId="@id/state_on" />
</animated-selector>

avd search 是动画矢量可绘制文件 icon_search 是正常的可绘制文件

将此可绘制选择器文件用作菜单中的图标

<?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/navigation_search"
       android:icon="@drawable/selector_search"
       android:title="@string/search"
       />
</menu>

尽情享受

为 BottomNavigationView 上的选定图标设置动画

Animating the selected icon on BottomNavigationView

android

material-design

bottomnavigationview

material-components

material-components-android