Question

使用AnimatedVectorDrawables，可以将某些动画应用于vectordrawable的各个部分（请参见here）。例如，考虑称为 vectordrawable.xml 的vectordrawable：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:height="64dp"
 android:width="64dp"
 android:viewportHeight="600"
 android:viewportWidth="600" >
     <path
         android:name="path"
         android:fillColor="#000000"
         android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</vector>

这是一个包含单个路径（线）的vectordrawable。然后，所需的动画将保存在名为 animator.xml 的单独文件中，例如：

<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
    android:duration="4000"
    android:propertyName="trimPathEnd"
    android:valueFrom="0"
    android:valueTo="1" />
</set>

将是显示正在绘制线条的动画。然后，这两个xml文件将馈入第三个animationvectordrawable xml文件：

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable">
<target
    android:animation="@anim/animator"
    android:name="path" />

</animated-vector>

问题是，如果您的vectordrawable路径包含大量要同时设置动画的路径，该怎么办？您可以这样做很长，必须给每个路径指定不同的名称，然后在animatedvectordrawable文件中使用相同的动画制作工具来定位每个路径。但是，如果您有20条以上的路径，这将花费很长时间，并且是一个混乱的解决方案。

您确实可以选择将一组路径包含在一个组中，然后定位一个组。但是，组的动画与路径的动画不同，即，无法为组设置动画trimPathEnd，因此您无法将此动画应用于一组路径。

Answer 1

我找到了一个库（here），该库引入了一个新的imageview-esque视图，该视图接受矢量可绘制对象。然后，您可以按名称或更重要的是按索引提取路径（或矢量可绘制矢量的任何部分）。因此，这可以通过创建一个for循环来为任意数量的路径设置动画，例如

RichPathView view = findViewbyId(R.id.richpathview);
for(int i=0, i<100, i++){
    RichPath richPath = view.findRichPathByIndex(i);
                RichPathAnimator.animate(richPath)
                        .trimPathEnd(0, 1)
                        .duration(1000)
                        .start();
}

此块将同时“绘制”可绘制矢量的前100条路径。

因此，这使您可以对矢量可绘制部分进行动画处理，而不必显式命名和引用每个部分。

Answer 2

我也想建议RichPath这样做，但我不建议长时间循环调用RichPathAnimator.animate()，您可以通过更好的方式获得相同的结果，请检查第3个完整示例中的步骤：

1-普通vector_drawable.xml，具有6条路径：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:viewportHeight="36.0"
    android:viewportWidth="36.0"
    android:width="256dp">

  <path
      android:pathData="M19.5,6.2l1.3-1.3c0.2-0.2,0.2-0.5,0-0.7c-0.2-0.2-0.5-0.2-0.7,0l-1.5,1.5C17.9,5.2,16.9,5,16,5c-1,0-1.9,0.2-2.7,0.6l-1.5-1.5c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l1.3,1.3C11,7.3,10,9,10,11h12C22,9,21,7.2,19.5,6.2z"
      android:strokeColor="#A4c639"
      android:strokeWidth="0.5"
      android:trimPathEnd="1"/>

  <path
      android:pathData="M13.9,8.9H13V8h0.9V8.9z"
      android:strokeColor="#A4c639"
      android:strokeWidth="0.5"
      android:trimPathEnd="1"/>

  <path
      android:pathData="M19,8.9h-0.9V8H19V8.9z"
      android:strokeColor="#A4c639"
      android:strokeWidth="0.5"
      android:trimPathEnd="1"/>

  <path
      android:pathData="M10,22c0,0.5,0.4,1,1,1h1v3.5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23h2v3.5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23h1c0.5,0,1-0.5,1-1V12H10V22z"
      android:strokeColor="#A4c639"
      android:strokeWidth="0.5"
      android:trimPathEnd="1"/>

  <path
      android:pathData="M24.5,12c-0.8,0-1.5,0.7-1.5,1.5v7c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5v-7C26,12.7,25.3,12,24.5,12z"
      android:strokeColor="#A4c639"
      android:strokeWidth="0.5"
      android:trimPathEnd="1"/>

  <path
      android:pathData="M7.5,12C6.7,12,6,12.7,6,13.5v7C6,21.3,6.7,22,7.5,22S9,21.3,9,20.5v-7C9,12.7,8.3,12,7.5,12z"
      android:strokeColor="#A4c639"
      android:strokeWidth="0.5"
      android:trimPathEnd="1"/>

</vector>

2-在RichPathView的{{1}}中使用layout：

ImageView

3-同时为所有路径设置动画。

<com.richpath.RichPathView
    android:id="@+id/richPathView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:vector="@drawable/vector_drawable" />

此外，如果我们有RichPathView pathView = findViewById(R.id.richPathView); RichPath[] paths = new RichPath[6]; for (int i = 0; i < paths.length; i++) { paths[i] = pathView.findRichPathByIndex(i); } RichPathAnimator .animate(paths) .trimPathEnd(0, 1) .duration(1600) .start();这样的API，它将变得更加干净，我为此here

开了一个问题

同时对可绘制矢量的许多部分进行动画处理

2 个答案: