Android Vector Drawable 问题

Question

我在 Adob​​e Illustrator 中使用 Android Asset Studio 制作了一个矢量可绘制动画，放置在应用程序中然后我运行它。

我得到了以下结果

Android Marshmallow（6.0.1 - 真实设备）

Android Nougat（7.1 - 模拟器）

正如您在 Marshmallow（和 Lollipop）中看到的那样，图像显示不正确。在 Lollipop 中，图像也是模糊的，并且动画无法正常工作。

谁能解释一下为什么以及如何解决它？

这是我的矢量绘图：

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="100dp"
            android:height="30dp"
            android:alpha="1"
            android:viewportHeight="30"
            android:viewportWidth="100">
            <group android:name="group">
                <path
                    android:name="path"
                    android:pathData="M 10.64 4.95 A 4.11,4.11,0,0,0,8.64,0.9500000000000002 A 4.21,4.21,0,0,0,3.6400000000000006,1.9500000000000002 A 4,4,0,0,0,2.6400000000000006,5.95 C 3.64 8.29 7.42 7.1 9.64 9.95 A 5.66,5.66,0,0,1,10.64,14.95 A 5.78,5.78,0,0,1,4.640000000000001,18.95 C 4.42 18.95 1.37 18.49 0.64 15.95 A 4.64,4.64,0,0,1,1.6400000000000006,11.95"
                    android:strokeColor="#FFFFFF"
                    android:strokeWidth="1"
                    android:trimPathEnd="0" />
                <path
                    android:name="path_1"
                    android:pathData="M 45.55 15.64 C 46.83 18.05 49.27 19.16 51.17 18.54 A 3.75,3.75,0,0,0,53.60999999999999,15.879999999999999 A 4.09,4.09,0,0,0,51.25999999999999,11.469999999999999 A 4.92,4.92,0,0,0,47.14999999999999,11.839999999999998 A 7.94,7.94,0,0,0,43.56999999999999,15.329999999999998 A 11.4,11.4,0,0,0,42.24999999999999,20.86 A 10.7,10.7,0,0,0,43.019999999999996,25.36 C 43.12 25.36 42.85 23.77 42.64 20.94 C 42.23 15.41 42.64 12.14 42.06 12.05 C 41.48 11.96 41.2 17.14 38.06 18.5 A 4.89,4.89,0,0,1,33.12,17.729999999999997 A 4.88,4.88,0,0,1,31.609999999999996,14.459999999999997 C 31.36 11.85 33.04 9.57 33.37 9.67 C 33.7 9.77 33.63 10.88 33.06 11.67 C 32.2 12.84 30.61 11.93 28.8 13.03 A 4.87,4.87,0,0,0,26.689999999999998,15.959999999999997 A 4.7,4.7,0,0,0,26.889999999999997,18.81 A 23.27,23.27,0,0,1,26.689999999999998,15.959999999999999 A 9.3,9.3,0,0,0,26.689999999999998,13.709999999999999 A 3.44,3.44,0,0,0,25,11.42 A 3.67,3.67,0,0,0,21.88,11.95 C 19.41 13.45 20.22 15.88 17.99 17.42 C 16.63 18.36 14.36 18.79 12.9 17.64 A 3.78,3.78,0,0,1,11.689999999999998,13.959999999999997 C 11.95 12.7 12.98 11.02 14.69 10.96 A 3.33,3.33,0,0,1,17.689999999999998,12.959999999999997"
                    android:strokeColor="#FFFFFF"
                    android:strokeWidth="1"
                    android:trimPathStart="1" />
                <path
                    android:name="path_2"
                    android:pathData="M 55.64 1.95 C 55.4 2.69 51.69 14.14 55.88 17.2 A 3.59,3.59,0,0,0,58.64,17.95 C 61.34 17.29 62.09 11.83 62.64 11.95 C 63.19 12.07 61.77 16.41 63.64 17.95 A 3.74,3.74,0,0,0,67.64,17.95 C 70.24 16.39 70.07 11.95 70.64 11.95 C 71.21 11.95 70.43 16.24 72.64 17.95 A 4.46,4.46,0,0,0,77.64,17.95 C 79.96 16.26 79.51 11.95 79.64 11.95 C 79.77 11.95 79.59 17.95 79.64 17.95 A 6.78,6.78,0,0,1,80.64,13.95 C 81.84 12.27 84.36 11.16 85.64 11.95 C 87.46 13.08 86.5 17.95 86.64 17.95 A 7.65,7.65,0,0,1,87.64,13.95 C 88.8 12.28 91.33 11.16 92.64 11.95 C 94.43 13.03 93.01 17.15 94.64 17.95 C 95.53 18.39 96.82 17.58 97.64 16.95"
                    android:strokeColor="#FFFFFF"
                    android:strokeWidth="1"
                    android:trimPathEnd="0" />
                <path
                    android:name="path_3"
                    android:pathData="M 33 3.6 L 33.85 4.73"
                    android:strokeColor="#FFFFFF"
                    android:strokeWidth="1"
                    android:trimPathEnd="0" />
                <path
                    android:name="path_4"
                    android:pathData="M 51.15 5.4 A 20.29,20.29,0,0,0,56.05,6.08 A 19.57,19.57,0,0,0,58.65,5.95"
                    android:strokeColor="#FFFFFF"
                    android:strokeWidth="1"
                    android:trimPathEnd="0" />
            </group>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path"
                android:duration="2000"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                android:propertyName="trimPathEnd"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
    <target android:name="path_1">
        <aapt:attr name="android:animation">
            <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_1"
                android:duration="2000"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                android:propertyName="trimPathStart"
                android:startOffset="2000"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
    <target android:name="path_2">
        <aapt:attr name="android:animation">
            <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_2"
                android:duration="2000"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                android:propertyName="trimPathEnd"
                android:startOffset="4000"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
    <target android:name="path_3">
        <aapt:attr name="android:animation">
            <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_3"
                android:duration="500"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                android:propertyName="trimPathEnd"
                android:startOffset="6000"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
    <target android:name="path_4">
        <aapt:attr name="android:animation">
            <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_4"
                android:duration="500"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                android:propertyName="trimPathEnd"
                android:startOffset="6500"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType" />
        </aapt:attr>
    </target>
</animated-vector>

Answer 1

如果我用 Android Studio 转换 SVG，问题就解决了。 Android Asset Studio 似乎没有正确转换。

这里有一些提示：

1) 在 Android Lollipop 中使用 android.support.v7.widget.AppCompatImageView 而不是 ImageView。如果您想以编程方式设置矢量，请使用 setImageResource(); 而不是 setImageDrawable();

2) 如果矢量模糊，解决方法如下：link

Answer 2

您是否在 build.gradle 中添加了以下内容

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

Answer 3

这可能是由于您在矢量可绘制高度宽度中放置了静态 dp

您可以使用以下库来定义您的尺寸

https://github.com/intuit/sdp

sdp 设置的 android:width 和 android:height 将解决这个问题。如下所示

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="@dimen/_100sdp"
            android:height="@dimen/_30sdp"
            android:viewportWidth="100"
            android:viewportHeight="30"
            android:alpha="1">
            <group android:name="group">
                <path
                    android:name="path"
                    android:pathData="M 10.64 4.95 A 4.11,4.11,0,0,0,8.64,0.9500000000000002 A 4.21,4.21,0,0,0,3.6400000000000006,1.9500000000000002 A 4,4,0,0,0,2.6400000000000006,5.95 C 3.64 8.29 7.42 7.1 9.64 9.95 A 5.66,5.66,0,0,1,10.64,14.95 A 5.78,5.78,0,0,1,4.640000000000001,18.95 C 4.42 18.95 1.37 18.49 0.64 15.95 A 4.64,4.64,0,0,1,1.6400000000000006,11.95"
                    android:strokeColor="#000000"
                    android:strokeWidth="1"/>
                <path
                    android:name="path_1"
                    android:pathData="M 45.55 15.64 C 46.83 18.05 49.27 19.16 51.17 18.54 A 3.75,3.75,0,0,0,53.60999999999999,15.879999999999999 A 4.09,4.09,0,0,0,51.25999999999999,11.469999999999999 A 4.92,4.92,0,0,0,47.14999999999999,11.839999999999998 A 7.94,7.94,0,0,0,43.56999999999999,15.329999999999998 A 11.4,11.4,0,0,0,42.24999999999999,20.86 A 10.7,10.7,0,0,0,43.019999999999996,25.36 C 43.12 25.36 42.85 23.77 42.64 20.94 C 42.23 15.41 42.64 12.14 42.06 12.05 C 41.48 11.96 41.2 17.14 38.06 18.5 A 4.89,4.89,0,0,1,33.12,17.729999999999997 A 4.88,4.88,0,0,1,31.609999999999996,14.459999999999997 C 31.36 11.85 33.04 9.57 33.37 9.67 C 33.7 9.77 33.63 10.88 33.06 11.67 C 32.2 12.84 30.61 11.93 28.8 13.03 A 4.87,4.87,0,0,0,26.689999999999998,15.959999999999997 A 4.7,4.7,0,0,0,26.889999999999997,18.81 A 23.27,23.27,0,0,1,26.689999999999998,15.959999999999999 A 9.3,9.3,0,0,0,26.689999999999998,13.709999999999999 A 3.44,3.44,0,0,0,25,11.42 A 3.67,3.67,0,0,0,21.88,11.95 C 19.41 13.45 20.22 15.88 17.99 17.42 C 16.63 18.36 14.36 18.79 12.9 17.64 A 3.78,3.78,0,0,1,11.689999999999998,13.959999999999997 C 11.95 12.7 12.98 11.02 14.69 10.96 A 3.33,3.33,0,0,1,17.689999999999998,12.959999999999997"
                    android:strokeColor="#000000"
                    android:strokeWidth="1"/>
                <path
                    android:name="path_2"
                    android:pathData="M 55.64 1.95 C 55.4 2.69 51.69 14.14 55.88 17.2 A 3.59,3.59,0,0,0,58.64,17.95 C 61.34 17.29 62.09 11.83 62.64 11.95 C 63.19 12.07 61.77 16.41 63.64 17.95 A 3.74,3.74,0,0,0,67.64,17.95 C 70.24 16.39 70.07 11.95 70.64 11.95 C 71.21 11.95 70.43 16.24 72.64 17.95 A 4.46,4.46,0,0,0,77.64,17.95 C 79.96 16.26 79.51 11.95 79.64 11.95 C 79.77 11.95 79.59 17.95 79.64 17.95 A 6.78,6.78,0,0,1,80.64,13.95 C 81.84 12.27 84.36 11.16 85.64 11.95 C 87.46 13.08 86.5 17.95 86.64 17.95 A 7.65,7.65,0,0,1,87.64,13.95 C 88.8 12.28 91.33 11.16 92.64 11.95 C 94.43 13.03 93.01 17.15 94.64 17.95 C 95.53 18.39 96.82 17.58 97.64 16.95"
                    android:strokeColor="#000000"
                    android:strokeWidth="1"/>
                <path
                    android:name="path_3"
                    android:pathData="M 33 3.6 L 33.85 4.73"
                    android:strokeColor="#000000"
                    android:strokeWidth="1"/>
                <path
                    android:name="path_4"
                    android:pathData="M 51.15 5.4 A 20.29,20.29,0,0,0,56.05,6.08 A 19.57,19.57,0,0,0,58.65,5.95"
                    android:strokeColor="#000000"
                    android:strokeWidth="1"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path"
                android:propertyName="trimPathEnd"
                android:duration="100"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="path_1">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_1"
                android:propertyName="trimPathStart"
                android:startOffset="100"
                android:duration="100"
                android:valueFrom="1"
                android:valueTo="0"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="path_2">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_2"
                android:propertyName="trimPathEnd"
                android:startOffset="200"
                android:duration="100"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="path_3">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_3"
                android:propertyName="trimPathEnd"
                android:startOffset="335"
                android:duration="100"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="path_4">
        <aapt:attr name="android:animation">
            <objectAnimator
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:name="path_4"
                android:propertyName="trimPathEnd"
                android:startOffset="435"
                android:duration="100"
                android:valueFrom="0"
                android:valueTo="1"
                android:valueType="floatType"
                android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
        </aapt:attr>
    </target>
</animated-vector>