同时绘制矢量可绘制部分的动画

Question

Using AnimatedVectorDrawables, one can apply certain animations to parts of a vectordrawable (see here ). For example consider the vectordrawable, called 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>

Which is a vectordrawable containing a single path (line). The desired animation would then be in a separate file, called animator.xml , for example:

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

Which would be animation showing the line being drawn. These two xml files would then feed into a third animatedvectordrawable xml file:

<?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>

So the question is, what if your vectordrawable path contained a large number of paths, which you wanted to animate simultaneously? You could do this the long way and would have to give every path a different name, then target each and every path with the same animator in your animatedvectordrawable file. But if you've got over 20 paths, this would take a long time and be a messy solution.

You do have the option of enclosing a set of paths in a group, then target a single group. But the animations for groups are different to that of paths, ie animating trimPathEnd isn't possible for a group, thus you cannot apply this animation to a group of paths.

Answer 1

I found a library ( here ), which introduces a new imageview-esque view, which accepts vector drawables. You can then extract the paths (or any part of the vector drawable) either by name, or more importantly, by index. Thus this allows one to animate as many paths as you like by creating a for loop, such as

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

This block would "draw" the first 100 paths of a vector drawable simultaneously.

So this allows you to animate the parts of vector drawable, without having to explicitly name and reference every single part.

Answer 2

I want to suggest RichPath as well to do that but I don't recommend to call RichPathAnimator.animate() inside a long loop, you can achieve the same result in a better way, please check the 3rd step in this full example:

1- Normal vector_drawable.xml with 6 paths:

<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- Use RichPathView in your layout insead of ImageView :

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

3- Animate all of your paths simultaneously.

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

also, it will be cleaner if we have an API like pathView.findAllRichPaths() , I have opened an issue for that here