javaandroidandroid-vectordrawableanimatedvectordrawable

Animating many parts of a vector drawable simultaneously


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, i.e. animating trimPathEnd isn't possible for a group, thus you cannot apply this animation to a group of paths.


Solution

  • 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:

    enter image description here

    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