我今天设计了两个可绘制的经典arrow 和hamburger 图标来重新创建和理解android 中的objectAnimator。当没有播放动画但更改了可绘制对象时会出现此问题。

我已经创建了 ic_backarrow.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="48dp"
    android:width="48dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path android:strokeColor="@color/blue_ripple"
        android:fillColor="@color/blue_ripple"
        android:pathData="@string/arrow" />

</vector>

后面是ic_menu.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="48dp"
    android:width="48dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <path android:fillColor="@color/blue_ripple"
        android:pathData="@string/menu" />

</vector>

在 strings.xml 中，我定义了我的路径以便于遵循:

<string name="arrow">M4,11 H20 V13 H4 V11 M4,11 L12,4 L13.5,5.5 L5.5,12.5 L4,11 M4,13 L12,20 L13.5,18.5 L7.2,13 L4,13</string>
<string name="menu">M3,6 H21 V8 H3 V6 M3,11 L21,11 L21,13 L3,13 L3,11 M3,16 L21,16 L21,18 L3,18 L3,16</string>

我还修改了路径以便能够为可绘制对象设置动画:箭头到菜单和菜单到箭头。

在我创建了 arrow_to_menu.xml 之后，我在其中定义了 objectAnimator:

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="pathData"
    android:valueFrom="@string/arrow"
    android:valueTo="@string/menu"
    android:duration="@integer/duration"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:valueType="pathType" />

和 menu_to_arrow.xml:

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="pathData"
    android:valueFrom="@string/menu"
    android:valueTo="@string/arrow"
    android:duration="@integer/duration"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:valueType="pathType" />

在 drawable 中，我还用初始 drawable 和目标 objectAnimator 定义了 animated-vector:

文件:avd_arrow_to_menu.xml:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_backarrow">

    <target
        android:name="@string/tick"
        android:animation="@animator/arrow_to_menu" />

</animated-vector>

还有avd_menu_to_arrow.xml:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_menu">

    <target
        android:name="@string/cross"
        android:animation="@animator/menu_to_arrow" />

</animated-vector>

在项目 layout 中，我创建了一个 ImageView:

<ImageView
    android:id="@+id/tick_cross"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@drawable/ic_menu"
    android:layout_margin="50dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

在 class 文件中，我查找 ImageView 并导入 AnimatedVectorDrawable

arrowMenu = (ImageView) findViewById(R.id.tick_cross);
menuToArrow = (AnimatedVectorDrawable) getDrawable(R.drawable.avd_menu_to_arrow);
arrowToMenu = (AnimatedVectorDrawable) getDrawable(R.drawable.avd_arrow_to_menu);

arrowMenu.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        animate(arrowMenu);
    }
});

当 ImageView 被点击时，它应该在 hamburger 图标和 arrow 图标之间移动:

public void animate(View view) {
    AnimatedVectorDrawable drawable = menu ? menuToArrow : arrowToMenu;
    arrowMenu.setImageDrawable(drawable);
    drawable.start();
    menu = !menu;
}

正如我之前所说，箭头和汉堡包图标之间没有动画。我试图将 android:duration 更改为更大的值，例如 1000 或更小的值，例如 400，但结果相同。

抱歉发了这么长的帖子，我真的需要解释我所做的每一步。

最佳答案

您需要为 VectorDrawables 中的 paths 命名。 如果我们查看您的第一个 AnimatedVectorDrawable:

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_backarrow">

    <target
        android:name="@string/tick"
        android:animation="@animator/arrow_to_menu" />

</animated-vector>

android:name="@string/tick" 行指定了 VectorDrawable 的哪一部分是您要设置动画的，但是如果我们查看 VectorDrawable，它的任何部分都没有被赋予与之匹配的名称。

要解决这个问题，请获取 ic_backarrow.xml 并添加适当的名称标签:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="48dp"
android:width="48dp"
android:viewportWidth="24"
android:viewportHeight="24">

    <path
    android:name="@string/tick"
    android:strokeColor="@color/blue_ripple"
    android:fillColor="@color/blue_ripple"
    android:pathData="@string/arrow" />

</vector>

然后将适当的 @string/cross 名称添加到您的其他 VectorDrawable 中的路径。

关于Android objectanimator 没有动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39978530/