在Android中动画矢量Drawable的动画

时间:2017-09-01 06:57:08

标签: android svg android-animation

我正在尝试通过设置角色的线条或路径来动画我的Android应用中插图画家导出的SVG文件,以向用户显示如何正确编写角色(例如:日语和中文字符)。但是当我运行应用程序时,它只会动画角色的边缘/笔划并恢复到原始状态。有没有人以前经历过这个案子?

这是我的SVG drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="300dp"
     android:height="300dp"
     android:viewportWidth="300.0"
     android:viewportHeight="300.0">
 <path
     android:name="invertu"
     android:fillColor="#FF000000"
     android:pathData="M21.23,263.43c0.68,-14.76 6.03,-28.9 
9.58,-43.12c3.82,-15.3 6.51,-30.8 10.68,-46.04c4.22,-15.46 9.06,-30.74 
14.02,-45.97c3.7,-11.38 7.53,-22.54 14.07,-32.66c14.19,-21.95 43.47,-29.83 
67.74,-33.8c13.6,-2.22 27.52,-2.66 41.27,-2.32c10.71,0.27 21.44,2.13 
31.29,6.5c28.73,12.76 43.98,42.42 53.04,70.95c5.67,17.85 9,36.29 
12.31,54.69c4.36,24.27 7.8,48.7 8.3,73.39c0.19,9.66 15.19,9.68
 15,0c-0.65,-32.46 -6.33,-64.51 -12.34,-96.33c-4.07,-21.5 -9.94,-42.7
 -19.22,-62.57c-8.76,-18.76 -21.57,-35.7 -38.92,-47.24c-20.15,-13.41 
-44.1,-15.18 -67.61,-14.26c-24.9,0.97 -49.66,5.88 -72.26,16.55c-20.76,9.8 
-33.38,26.41 -41.69,47.37c-4.61,11.65 -8.1,23.81 -11.83,35.77c-4.22,13.53 
-8.13,27.16 -11.53,40.92c-3.27,13.2 -5.45,26.61 -9.05,39.73c-3.47,12.65 
-7.23,25.26 -7.84,38.45C5.79,273.11 20.79,273.06 21.23,263.43L21.23,263.43z"
     android:strokeLineCap="round"
     android:strokeLineJoin="round"
     android:strokeWidth="3"
     android:trimPathEnd="0"/> </vector>

这是我的动画矢量

<animated-vector
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:aapt="http://schemas.android.com/aapt"
  android:drawable="@drawable/ic_ba">

  <target android:name="invertu">
    <aapt:attr name="android:animation">
      <objectAnimator
        android:duration="1000"
        android:interpolator="@android:interpolator/fast_out_slow_in"
        android:propertyName="trimPathEnd"
        android:valueFrom="0"
        android:valueTo="1"/>
    </aapt:attr>
  </target>

我从Adobe Illustrator导出的VSG在中心变得透明,只有轮廓从一个点到另一个点动画。 Vector Path TIA

1 个答案:

答案 0 :(得分:1)

trimPathStarttrimPathEnd仅用于设置路径笔划(轮廓)的开始和结束。如果你想要对路径的填充部分进行动画处理,你将不得不采取另一种方式。

如果角色中的线条形状具有恒定的宽度,则只需将它们绘制为粗线 - 而不是像现在这样的轮廓。如果这样做,则可以使用trimPath方法对线条进行动画处理。

相关问题