可绘制路径的AnimatedVectorDrawable空路径

Question

我想要什么

我希望能够从没有路径的->目标中绘制一个向量。因此，例如，从零到检查标记SVG。

我试过什么

这是我的向量绘图：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="128dp"
    android:width="128dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

<path
    android:name="done"
    android:pathData="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
    android:fillColor="#fff"
    android:strokeWidth="1"
    android:strokeLineCap="round"
    android:strokeColor="#fff"/>

​

那只是一个复选标记SVG。

这是我的动画(我知道这是错误的)。*( )。从一个可绘制的向量到另一个矢量动画的路径数据必须有相同数量的路径方向：

<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="0"
android:valueTo="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"
android:valueType="pathType"
xmlns:android="http://schemas.android.com/apk/res/android" />

和动画向量(将向量+动画结合在一起)

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_done">

<target
    android:animation="@animator/ic_disappear"
    android:name="opacity"/>

​

正如我前面所指出的，这是错误的。那么，我如何为SVG创建一个对象动画器，使其从没有路径动画到我想要的路径。此动画类似于绘制可绘图的人。

Answer 1

正如您所说，这两条路径描述必须有相同数量的命令和坐标。你的道路是一个充满形状，你只能一次线性动画。所以你不能做两步一步的检查。至少不会有单一的路径变形。

第一个简单的方法就是从路径起点开始。正好在支票标记的拐角处。所以看起来不太糟。

​

<svg width="200" height="200" viewBox="0 0 24 24">
  <path d="M0 0">
    <animate attributeName="d" attributeType="XML"
       from="M9 16.2 L 9 16.2 l 0 0 L 9 16.2 9 16.2 l 0 0 L 9 16.2z"
       to="M9 16.2 L 4.8 12 l -1.4 1.4 L 9 19 21 7 l -1.4-1.4 L 9 16.2z"
       dur="1s" fill="freeze" />
  </path>
</svg>

​

或者你可以从拐角处的中间点开始：

​

<svg width="200" height="200" viewBox="0 0 24 24">
  <path d="M0 0">
    <animate attributeName="d" attributeType="XML"
       from="M9 17.6 L 9 17.6 l 0 0 L 9 17.6 9 17.6 l 0 0 L 9 17.6z"
       to="M9 16.2 L 4.8 12 l -1.4 1.4 L 9 19 21 7 l -1.4-1.4 L 9 16.2z"
       dur="1s" fill="freeze" />
  </path>
</svg>

​

或者从角菱形开始，然后从那里长出两只“手臂”。

​

<svg width="200" height="200" viewBox="0 0 24 24">
  <path d="M0 0">
    <animate attributeName="d" attributeType="XML"
       from="M9 16.2 L 9 16.2 l -1.4 1.4 L 9 19 l 1.4 -1.4 l -1.4-1.4 L 9 16.2z"
       to=  "M9 16.2 L 4.8 12 l -1.4 1.4 L 9 19 L 21 7     l -1.4-1.4 L 9 16.2z"
       dur="1s" fill="freeze" />
  </path>
</svg>

​

Answer 2

您可以在您选择的时间内将trimPathEnd属性从0动画变为1，而不是动画pathData。因此，将propertyName更改为trimPathEnd，并适当地更改AnimatedVectorDrawable文件。结果就像现在正在写勾号一样。

此外，如果您想要一个演示，请阅读教程“图标动画技术概论”。这篇文章的正文中有一些交互式演示项目。

您还可以在android站点中阅读有关AnimatedVectorDrawable类的内容。虽然trimPathEnd propertyName不在列表中，但它有效。