尝试测试AnimatedVectorDrawable时出错,"无法从x变换为z"

Question

我想制作一个AnimatedVectorDrawable,这样我的FAB可以看起来像这个一样神奇,有动画和东西.

我找到了这个很棒的教程,关于如何使用和实现它们等等,后来我发现了一个非常有用的工具,用于将SVG转换为Android-VectorDrawables,并转换了这两个图像:https : //github.com/google/material- design-icons/blob/master/content/svg/design/ic_add_48px.svg https://github.com/google/material-design-icons/blob/master/action/svg/design/ic_done_48px.svg

现在这是我提出的xml-"代码":

绘制/ vector_add.xml:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="48"
    android:viewportHeight="48">

    <group>
        <path
            android:pathData="M0 0h48v48h-48Z" />
        <path
            android:name="add"
            android:fillColor="#ffffff"
            android:pathData="M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v7Z" />
    </group>
</vector>

动画/ add_to_done.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v7Z"
        android:valueTo="M18 32.34l-8.34-8.34-2.83 2.83 11.17 11.17 24-24-2.83-2.83Z"
        android:valueType="pathType" />
</set>

绘制/ ic_add.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_add">

    <target
        android:name="add"
        android:animation="@anim/anim_plus_to_done" />

</animated-vector>

如果我运行此代码,我最终会遇到此错误:

Caused by: android.view.InflateException: Binary XML file line #3 Can't morph from M38 26h-12v12h-4v-12h-12v-4h12v-12h4v12h12v4Z to M18 32.34l-8.34-8.34-2.83 2.83 11.17 11.17 24-24-2.83-2.83Z
        at android.animation.AnimatorInflater.setupAnimatorForPath(AnimatorInflater.java:337)
        at android.animation.AnimatorInflater.parseAnimatorFromTypeArray(AnimatorInflater.java:283)
        at android.animation.AnimatorInflater.loadAnimator(AnimatorInflater.java:618)
        at android.animation.AnimatorInflater.loadObjectAnimator(AnimatorInflater.java:577)
        at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:529)
        at android.animation.AnimatorInflater.createAnimatorFromXml(AnimatorInflater.java:542

我的猜测是两个svg中的两个路径太不同了,所以Android无法自己处理动画,我需要为每个动画"checkpoint"制作几个VectorDrawables.

......我可能完全不赞成这个理论,但这是我能想到的最合乎逻辑的......

我没有太多的经验(也没有任何经验)与矢量和插画家等合作,所以你们想出的任何帮助将非常感激.

祝你愉快,圣诞快乐.

真诚的,Måns.

Answer 1

如果要在任意SVG图像(或VectorDrawable)之间进行变换,则需要对齐相应的路径,以使它们与变形兼容.这是一项非常繁琐的任务,但是有一个命令行工具可以为您做到这一点:VectAling

您只需要从命令行运行VectAlign工具,传递原始路径,它将自动创建"可变形"序列.

用法示例:

java -jar  vectalign.jar --start "M 10,20..." --end "M 30,30..."

输出:

--------------------
  ALIGNMENT RESULT  
-------------------- 
# new START sequence:  
M 48.0,54.0 L 31.0,42.0 L 15.0,54.0 L 21.0,35.0 L 6.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 25.0,23.0 L 32.0,4.0 L 40.0,23.0 L 58.0,23.0 L 42.0,35.0 L 48.0,54.0 

# new END sequence:  
M 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 48.0,54.0 L 31.0,54.0 L 15.0,54.0 L 10.0,35.0 L 6.0,23.0 L 25.0,10.0 L 32.0,4.0 L 40.0,10.0 L 58.0,23.0 L 54.0,35.0 L 48.0,54.0 

现在,您可以在Android项目中使用这些新序列,并像往常一样使用AnimatedVectorDrawable!

您还可以传递SVG文件:

java -jar  vectalign.jar --start image1.svg --end image2.svg

这是VectAlign 演示的样本之一:

Answer 2

你想要变形的VectorDrawables必须是兼容的,这意味着它们必须具有类似的复杂性; 类似的长度和命令数(pksink提到了这一点).

这样我最终解决这个问题就是采用"加号"符号并在android studio中手动修改尺寸,直到我得到类似于复选标记的东西.

加上矢量:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportHeight="24"
    android:viewportWidth="24"
    android:width="24dp"
    android:height="24dp">

    <group android:name="plus_group" android:pivotX="12" android:pivotY="12">
        <path
            android:name="plus_path"
            android:strokeColor="@android:color/white"
            android:strokeWidth="3"
            android:pathData="M12,0L12,24M0,12,L24,12" />
    </group>
</vector>

CheckMark矢量:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:width="24dp"
    android:height="24dp">
    <group android:name="check_group"
        android:pivotX="12"
        android:translateX="0"
        android:pivotY="12">

        <path
            android:name="check_path"
            android:strokeColor="@android:color/white"
            android:strokeWidth="3"
            android:pathData="M20,0L06,20M0,14,L08,19" />
    </group>
</vector>

请注意,这些命令的数量相同.选中标记看起来并不完美,但如果将其放在浮动操作按钮中,则无法注意到.

附加提示:将pathData移动到字符串变量.这样,在objectAnimators中保持一致性就更容易了.