Android动画 - 矢量图像缩放质量

Question

我在第一页的应用程序中添加了一个图像作为徽标。第一个地方的标志是全屏，3秒后它的大小将变为1x。

    <scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="3"
    android:toXScale="1"
    android:fromYScale="3"
    android:toYScale="1"
    android:duration="3000"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="3000">
</scale>

徽标图像是一个矢量文件（SVG），因此预计在尺寸调整过程中不会失去质量，但是3倍尺寸（第一次）的徽标质量低，就像光栅图像一样。我怎样才能保持高质量的动画质量？

更新 这就是我使用矢量的方式：

    <ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:id="@+id/logo"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="20dp"
    android:background="@drawable/ic_logo"/>

这是从Android Studio Vector Asset导入的SVG路径：

<vector android:height="24dp" android:viewportHeight="10418.0"
android:viewportWidth="11006.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#536F96" android:pathData="M980,2554c83,185 592,871 588,968 -1,30 -210,427 -251,522 -78,186 -159,412 -198,612l-1114,237 -5,1310 1115,233c70,179 122,410 197,597 351,872 417,195 -330,1484l914,927c1254,-773 739,-660 1486,-338 199,86 412,123 604,208l242,1104 1294,-3 248,-1107c367,-124 854,-256 1114,-471 145,52 350,212 486,297 132,82 393,276 537,307l868,-884c-73,-234 -456,-728 -599,-982 84,-247 280,-471 360,-815l-765,2c-1057,2387 -4178,2532 -5524,497 -1386,-2097 179,-5082 2981,-4837 -83,134 -143,82 -143,289l5,1031 393,-1c20,-379 -59,-855 158,-1117l595,-600c36,-50 8,-2 40,-66 -576,-371 -1922,-337 -2701,-51 -284,104 -507,255 -734,337 -165,-95 -298,-189 -462,-295 -146,-95 -345,-235 -480,-302 -113,59 -821,774 -919,907z"/>
<path android:fillColor="#536F96" android:pathData="M7617,5574l-346,1c-150,921 -284,1445 -1178,2020 -681,438 -1864,444 -2503,-51 79,-121 147,-121 221,-274 -498,9 -600,63 -697,-146l1831,2c265,2 289,-77 414,-203 210,-212 400,-400 612,-612 423,-423 494,-389 467,-764l-386,-5c-1,91 -1,107 -172,270l-707,706c-274,276 -217,199 -732,199 -312,0 -624,-1 -936,1 54,-128 879,-909 1045,-1074l800,-800c92,-93 133,-121 139,-407 -454,-13 -274,24 -682,397 -134,133 -244,243 -377,376 -126,127 -629,664 -760,725 5,-491 -69,-662 113,-837l722,-724c152,-143 836,-72 1380,-91l12,-387c-122,-19 -1338,-27 -1447,-8 -93,17 -1031,951 -1137,1084 -161,202 54,1163 -78,1425 -20,39 -144,152 -186,194 -36,37 -56,62 -92,96 -77,70 -27,40 -116,78 -464,-554 -453,-1761 8,-2477 202,-315 485,-607 805,-794 431,-253 695,-282 1253,-341l-3,-349c-531,-76 -1232,227 -1573,460 -1273,869 -1605,2628 -664,3920 989,1359 3190,1608 4450,-40 236,-308 570,-1062 500,-1570z"/>
<path android:fillColor="#2590C8" android:pathData="M9715,2826c696,-211 1035,867 328,1092 -722,231 -1094,-860 -328,-1092zM8973,3966l-937,959c-147,129 -620,61 -864,61 -325,0 -649,0 -973,0 -158,0 -315,-2 -473,-2 -227,0 -225,37 -335,151 -218,227 -1332,1304 -1418,1435 266,9 529,45 651,-68 131,-121 245,-250 374,-379 120,-120 643,-681 761,-729 112,-21 1977,35 2290,2 132,-14 228,-159 311,-242 184,-184 789,-763 870,-887 293,43 370,224 810,150 1207,-203 1141,-1973 -74,-2096 -302,-31 -572,76 -762,225 -149,115 -314,330 -374,604 -84,383 32,527 143,816z"/>
<path android:fillColor="#2590C8" android:pathData="M10101,386c349,-173 684,228 512,557 -322,613 -1225,-202 -512,-557zM9589,1144c-151,105 -2165,2152 -2517,2503 -199,199 -122,222 -479,243l-7,401c529,12 375,62 971,-535 269,-270 516,-516 785,-785 263,-264 505,-505 769,-769l791,-782c893,355 1445,-649 868,-1209 -256,-248 -700,-298 -990,-39 -358,321 -288,500 -191,972z"/>
<path android:fillColor="#536F96" android:pathData="M8054,1110c-109,-414 494,-519 565,-152 77,397 -480,474 -565,152zM7825,1236c-438,459 -893,894 -1346,1347 -118,118 -210,213 -331,328 -168,161 -112,218 -112,584 0,423 -25,933 7,1345l397,0c16,-399 2,-821 2,-1219 -1,-289 -53,-367 111,-524l1560,-1556c947,95 833,-666 614,-887 -349,-352 -1030,-171 -902,582z"/>

Answer 1

您可以尝试使用原生SVG动画：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300">
    <title>Downscale to Center</title>
    <rect width="100" height="100" fill="lightgray" transform="scale(3)">
        <title>Reference Rectangle</title>
    </rect>
    <rect width="100" height="100" transform="scale(3)">
        <animateTransform attributeName="transform" type="translate" to="100 100" begin="3s" dur="3s" fill="freeze"/>
        <animateTransform attributeName="transform" type="scale" additive="sum" from="3" to="1" begin="3s" dur="3s" fill="freeze"/>
    </rect>
</svg>