Question

我想要什么

我希望能够从无路径绘制Vector Drawable - ＆gt;目标。例如，从零开始绘制复选标记SVG。

我尝试了什么

这是我的Vector drawable：

<?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创建一个对象动画师，从无路径动画到我想要的路径。此动画类似于绘制drawable的人。

Answer 1

正如您所说，两个路径描述必须具有相同数量的命令和坐标。你的路径是一个填充的形状，你只能线性动画一次。因此，您无法执行两步向下检查动作。至少没有单一的路径变形。

第一个简单的方法就是从路径起点开始。这恰好是复选标记的骗子。所以它看起来并不坏。

＆＃13;

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

＆＃13;

或者你可以在角落的中心点开始它：

＆＃13;

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

＆＃13;

或者也许从角落钻石开始，然后长出两个＆＃34;手臂＆＃34;从那里。

＆＃13;

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

＆＃13;

Answer 2

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

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

您还可以在Android开发者网站上阅读有关AnimatedVectorDrawable类的内容。尽管trimPathEnd属性名称不在列表中，但它仍然有效。

AnimatedVectorDrawable到drawable路径

2 个答案: