AnimatedVectorDrawable 空路径到可绘制路径答案

【问题标题】：AnimatedVectorDrawable empty path to the drawable pathAnimatedVectorDrawable 空路径到可绘制路径
【发布时间】：2016-06-04 22:09:30
【问题描述】：

我想要什么

我希望能够从无路径 -> 目标中绘制 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" />

以及动画矢量（将矢量+动画捆绑在一起）

<?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 创建一个对象动画器，以便从没有路径到我想要的路径进行动画处理。此动画类似于绘制可绘制对象的人。

【问题讨论】：

标签： android animation svg vector

【解决方案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>

【讨论】：

哇，我稍后再试试，这是个好主意。我喜欢增加两条手臂的想法。几天前我刚刚发现了 SVG 动画的概念，所以我真的在探索。有关弄清楚如何解析路径字符串的任何提示？它在某种程度上对我来说是胡言乱语，我想了解更多
权威来源是 SVG 规范：w3.org/TR/SVG/paths.html#PathData
@rosenthal 你最终创建了什么矢量可绘制对象？可以分享一下代码吗？

【解决方案2】：

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

此外，如果您想要演示，请阅读教程"An Introduction to Icon Animation Techniques"。文章正文中有一些交互式演示项目。

您还可以在 android 开发者网站中阅读有关 AnimatedVectorDrawable 类的信息。虽然 trimPathEnd propertyName 不在列表中，但它可以工作。

【讨论】：