Android objectanimator 没有动画

Android objectanimator not animating

我今天设计了两个可绘制的经典arrowhamburger图标来重新创建和理解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's

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,但结果相同。

抱歉这么久 post,我真的需要解释我所做的每一步。

您需要为 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 中的路径。