如何以类似流体的方式为 VectorDrawable 设置动画？
How to animate a VectorDrawable in a fluid-like manner?
背景
假设我有一个看起来像上->下箭头的 VectorDrawable：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z"
android:fillColor="#010101"/>
</vector>
我想展示它的动画，看起来像它倾倒的液体，所以首先什么都不显示，然后是顶部区域，然后是中间区域，然后是底部。显示完了，就开始隐藏了，所以先隐藏上层，然后是中层，然后是下层。
这里是我的意思的草图：
问题
有一些关于 VectorDrawable 动画的教程，似乎它们需要大量的矢量理解，没有简单的方法来做这样的事情。
我发现了什么
我找到了一个工具可以用于此目的，但我不知道如何使用它，示例 link 目前已损坏：
https://romannurik.github.io/AndroidIconAnimator/
我也找到了一些关于VectorDrawable动画的教程，但是找不到具体的动画解释：
http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html
这个 link 特别提示我应该使用什么。我想我应该使用 "trimPathStart"、"trimPathEnd"、"trimPathOffset"，或者 "clip-path"。
他们那里的示例动画表明它可能是：
但是我找不到怎么做。
问题
如何在 VectorDrawable 上应用这样的动画？
它是否也适用于旧 Android 版本，使用支持库？
编辑：
我已经成功地制作了箭头动画，但它有 2 个问题：
因为是单路，所以不太好看。它需要知道如何将它分成 3 个路径，以便每个路径都能很好地动画。
看来我在代码中使用的都是API 21及以上。我是通过查看我之前写的 link 做到的（这里），并且需要知道如何支持旧版本。
代码如下：
res/drawable/vector_animation.xml
<animated-vector
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_darkblue_arrow">
<target android:name="a_stroke">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
</animated-vector>
res/drawable/vector.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:name="a_stroke"
android:fillColor="#010101"
android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z"/>
</vector>
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:contentDescription="@null"
android:src="@drawable/vector_animation"/>
</FrameLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Animatable cursiveAvd = ((Animatable) ((ImageView) findViewById(R.id.imageView)).getDrawable());
cursiveAvd.stop();
cursiveAvd.start();
}
}
编辑：
我制作了一个简单的 3 路径箭头 VectorDrawable，并成功地对其进行了动画处理。
这是我创建的 VectorDrawable：
ic_drawing.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="210dp"
android:height="297dp"
android:viewportHeight="1052.3622"
android:viewportWidth="744.0945">
<path
android:name="main_line"
android:fillColor="#00000000"
android:pathData="M742.6,9.7C313,-8.4 316.2,860.8 316.2,860.8"
android:strokeAlpha="1"
android:strokeColor="#000000"
android:strokeLineCap="butt"
android:strokeLineJoin="miter"
android:strokeWidth="5.32507801"/>
<path
android:name="left_line"
android:fillColor="#00000000"
android:pathData="m314.3,846.6c-211.4,-254.3 -160,-294.3 -160,-294.3"
android:strokeAlpha="1"
android:strokeColor="#000000"
android:strokeLineCap="butt"
android:strokeLineJoin="miter"
android:strokeWidth="5"/>
<path
android:name="right_line"
android:fillColor="#00000000"
android:pathData="M320,843.8C364.2,751.2 437.4,670.7 471.4,566.6"
android:strokeAlpha="1"
android:strokeColor="#000000"
android:strokeLineCap="butt"
android:strokeLineJoin="miter"
android:strokeWidth="5"/>
</vector>
vector_animation2.xml
<animated-vector
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_drawing">
<target android:name="main_line">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
<target android:name="left_line">
<aapt:attr name="android:animation">
<objectAnimator
android:startDelay="5000"
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
<target android:name="right_line">
<aapt:attr name="android:animation">
<objectAnimator
android:startDelay="5000"
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
</animated-vector>
所以，它工作得很好，但只适用于较新版本的 Android，我仍然想知道如何很好地拆分现有的 VectorDrawable，而不是创建一个新的。
有几种方法可以获得类似的外观，但并非所有方法都可以使用支持库向后兼容。出于这个原因，我建议使用 trimPathStart 和 trimPathEnd.
我将描述我将采用的方法，而不是最终的解决方案（可能很耗时！）。
入门的第一个问题就是你原来的VectorDrawable不太适合做这种动画！
问题中的可绘制对象描述了形状的轮廓（即勾勒出箭头的九条线）并显示了填充。对我们的目的来说更好的方法是让一个由三行组成的可绘制对象没有 fillColor，而是使用 strokeColor 和 strokeWidth 来设置这些行的显示方式。
这应该是一个包含三个 <path> 元素的简单 VectorDrawable：一个用于垂直线，一个用于箭头的两侧。
一旦你有了这个，你就可以考虑你想要你的动画看起来如何。 trimPathStart 和 trimPathEnd 应该是 0 到 1 之间的值，其中 0 是路径的起点，1 是终点。考虑从上到下绘制的垂直线：
trimPathStart="0" trimPathEnd="0" --我们看不到线
-> 动画到
trimPathStart="0" trimPathEnd="1" --我们已经从上到下划线了
-> 动画到
trimPathStart="1" trimPathEnd="1" --我们通过从上到下移动起点使线条再次消失
您可以对箭头的每一侧做类似的事情，并根据需要对事物进行排序以获得您想要的效果。
背景
假设我有一个看起来像上->下箭头的 VectorDrawable：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z"
android:fillColor="#010101"/>
</vector>
我想展示它的动画，看起来像它倾倒的液体，所以首先什么都不显示，然后是顶部区域，然后是中间区域，然后是底部。显示完了，就开始隐藏了，所以先隐藏上层，然后是中层，然后是下层。
这里是我的意思的草图：
问题
有一些关于 VectorDrawable 动画的教程，似乎它们需要大量的矢量理解，没有简单的方法来做这样的事情。
我发现了什么
我找到了一个工具可以用于此目的，但我不知道如何使用它，示例 link 目前已损坏：
https://romannurik.github.io/AndroidIconAnimator/
我也找到了一些关于VectorDrawable动画的教程，但是找不到具体的动画解释：
http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html
这个 link 特别提示我应该使用什么。我想我应该使用 "trimPathStart"、"trimPathEnd"、"trimPathOffset"，或者 "clip-path"。
他们那里的示例动画表明它可能是：
但是我找不到怎么做。
问题
如何在 VectorDrawable 上应用这样的动画？
它是否也适用于旧 Android 版本，使用支持库？
编辑： 我已经成功地制作了箭头动画，但它有 2 个问题：
因为是单路，所以不太好看。它需要知道如何将它分成 3 个路径，以便每个路径都能很好地动画。
看来我在代码中使用的都是API 21及以上。我是通过查看我之前写的 link 做到的（这里），并且需要知道如何支持旧版本。
代码如下：
res/drawable/vector_animation.xml
<animated-vector
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_darkblue_arrow">
<target android:name="a_stroke">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
</animated-vector>
res/drawable/vector.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:name="a_stroke"
android:fillColor="#010101"
android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z"/>
</vector>
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:contentDescription="@null"
android:src="@drawable/vector_animation"/>
</FrameLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Animatable cursiveAvd = ((Animatable) ((ImageView) findViewById(R.id.imageView)).getDrawable());
cursiveAvd.stop();
cursiveAvd.start();
}
}
编辑： 我制作了一个简单的 3 路径箭头 VectorDrawable，并成功地对其进行了动画处理。
这是我创建的 VectorDrawable：
ic_drawing.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="210dp"
android:height="297dp"
android:viewportHeight="1052.3622"
android:viewportWidth="744.0945">
<path
android:name="main_line"
android:fillColor="#00000000"
android:pathData="M742.6,9.7C313,-8.4 316.2,860.8 316.2,860.8"
android:strokeAlpha="1"
android:strokeColor="#000000"
android:strokeLineCap="butt"
android:strokeLineJoin="miter"
android:strokeWidth="5.32507801"/>
<path
android:name="left_line"
android:fillColor="#00000000"
android:pathData="m314.3,846.6c-211.4,-254.3 -160,-294.3 -160,-294.3"
android:strokeAlpha="1"
android:strokeColor="#000000"
android:strokeLineCap="butt"
android:strokeLineJoin="miter"
android:strokeWidth="5"/>
<path
android:name="right_line"
android:fillColor="#00000000"
android:pathData="M320,843.8C364.2,751.2 437.4,670.7 471.4,566.6"
android:strokeAlpha="1"
android:strokeColor="#000000"
android:strokeLineCap="butt"
android:strokeLineJoin="miter"
android:strokeWidth="5"/>
</vector>
vector_animation2.xml
<animated-vector
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_drawing">
<target android:name="main_line">
<aapt:attr name="android:animation">
<objectAnimator
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
<target android:name="left_line">
<aapt:attr name="android:animation">
<objectAnimator
android:startDelay="5000"
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
<target android:name="right_line">
<aapt:attr name="android:animation">
<objectAnimator
android:startDelay="5000"
android:duration="5000"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:propertyName="trimPathEnd"
android:startOffset="1300"
android:valueFrom="0"
android:valueTo="1"/>
</aapt:attr>
</target>
</animated-vector>
所以，它工作得很好，但只适用于较新版本的 Android，我仍然想知道如何很好地拆分现有的 VectorDrawable，而不是创建一个新的。
有几种方法可以获得类似的外观，但并非所有方法都可以使用支持库向后兼容。出于这个原因，我建议使用 trimPathStart 和 trimPathEnd.
我将描述我将采用的方法，而不是最终的解决方案（可能很耗时！）。
入门的第一个问题就是你原来的VectorDrawable不太适合做这种动画！
问题中的可绘制对象描述了形状的轮廓（即勾勒出箭头的九条线）并显示了填充。对我们的目的来说更好的方法是让一个由三行组成的可绘制对象没有 fillColor，而是使用 strokeColor 和 strokeWidth 来设置这些行的显示方式。
这应该是一个包含三个 <path> 元素的简单 VectorDrawable：一个用于垂直线，一个用于箭头的两侧。
一旦你有了这个，你就可以考虑你想要你的动画看起来如何。 trimPathStart 和 trimPathEnd 应该是 0 到 1 之间的值，其中 0 是路径的起点，1 是终点。考虑从上到下绘制的垂直线：
trimPathStart="0" trimPathEnd="0" --我们看不到线
-> 动画到
trimPathStart="0" trimPathEnd="1" --我们已经从上到下划线了
-> 动画到
trimPathStart="1" trimPathEnd="1" --我们通过从上到下移动起点使线条再次消失
您可以对箭头的每一侧做类似的事情，并根据需要对事物进行排序以获得您想要的效果。