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

Question

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

<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 文件将输入到第三个 animatedvectordrawable 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();
}

此块将 "draw" 可同时绘制矢量的前 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- 在 layout 中使用 RichPathView 而不是 ImageView :

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

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

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();

此外，如果我们有一个像 pathView.findAllRichPaths() 这样的 API，它会更干净，我已经为此打开了一个问题 here

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

Animating many parts of a vector drawable simultaneously

java

android

android-vectordrawable

animatedvectordrawable