android - AnimatedVectorDrawable 可绘制路径的空路径

Question

我想要什么

我希望能够从无路径 -> 目标绘制 Vector Drawable。因此，例如，从无到有绘制复选标记 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" />

和动画矢量(将矢量 + 动画 bundle 在一起)

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

如您所说，两个路径描述必须具有相同数量的命令和坐标。你的路径是一个填充的形状，你只能线性地动画一次。所以你不能做一个先下后上两步的检查 Action 。至少不是单一路径变形。

第一个简单的方法就是从路径起点开始。这恰好在复选标记的弯曲处。所以看起来还不错。

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

或者从角落的菱形开始，然后从那里长出两个“ ARM ”。

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