Question

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

我创建了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中我还使用初始animated-vector和目标drawable定义了objectAnimator：

档案：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这样的小东西，但我有相同的结果。

对于这篇长篇文章感到抱歉，我真的需要解释我所做的每一步。

Answer 1

您需要为paths中的VectorDrawables提供姓名。如果我们查看您的第一个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没有动画

1 个答案: