用于创建 AnimatedVectorDrawable 的工具

Question

我非常喜欢添加到 Android 中的 AnimatedVectorDrawable 功能。有什么好的工具可以创建这样的动画吗？

例如任何创建动画的工具 like described here：

编辑：

到目前为止，我已经找到了这些工具（有点帮助）：

Answer 1

找到两个很棒的网站。 AndroidIconAnimator，这是一个基于网络的工具，用于创建 AnimatedVectorDrawables。和 Shapeshifter，可以很好地控制如何变形路径。

更新 07-09-2017

这两种工具现已合并为一个非常好的解决方案。我花了一些时间才明白如何使用它，但是一旦你看到它，它就是一个非常强大的工具

Shapeshifter.design

感谢 2 Roman Nurik 和 Alex Lockwood。

Answer 2

这个问题很老了。我的回答可能对未来的读者有所帮助。

像提问者展示的那样制作动画非常简单。我们自己可以创建如图所示的动画。首先，创建一个 VectorDrawable。例如：

my_vector_drawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="800dp"
        android:height="800dp"
        android:viewportWidth="800.0"
        android:viewportHeight="800.0">

    <path
        android:name="a_circle"
        android:pathData="M  250   200
        q   -86     02    -140     57.5
        t   -57    135.5
        q   -03     93      67    156
        q    59     52     135     50
        q    71    -02     132    -54
        q    66    -56      66   -146
        q    00    -80     -45   -129
        q   -68    -72    -158    -70   "

        android:strokeLineCap="round"
        android:strokeColor="#f00f"
        android:fillColor="#00000000"
        android:trimPathEnd="0"
        android:strokeWidth="32"/>



</vector>

my_animated_vector_drawable.xml

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

    <target
        android:name="a_circle"
        android:animation="@animator/my_animation"/>

</animated-vector>

my_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:propertyName="trimPathEnd"
        android:duration="1000"
        android:valueFrom="0"
        android:valueTo="1"
        android:repeatCount="0"
        android:repeatMode="restart"/>
</set>

第一个文件包含图片数据。第三个文件包含动画数据。第二个文件链接第一个和第二个。

您可以创建三个空白文件。将上面给出的内容复制并粘贴到您的文件中。

您将前两个文件放在可绘制文件夹中。第三个放在“动画师”文件夹中。这两个文件夹都在 res 文件夹中找到了位置。

您可以创建一个包含 ImageView 的布局文件。您可以将 AnimatedVectorDrawable 文件作为可绘制对象 (android:src="my_animated_vector_drawable")。

在您的 activity 中将内容视图设置为布局。另外，给 ImageView 充气。

(myImage=((ImageView)findViewById(R.id.yourimageview name);
myImage.getDrawable.start():

那就看热闹了。您可以在 AnimatedVectorDrawable 文件中有多个目标。您可以在动画文件中设置多个 ObjectAnimators...

您问题中显示的动画是路径变形。甚至路径变形示例在文档中也很简单。我留给你去试验。

Answer 3

您可以使用 Airbnb 的 lottie 库。它将 After Effects 中的动画设计路径传送到适合 android 的动画矢量绘图。我认为，如果您具有在 After Effects 中为矢量路径设置动画的良好技能，这将是最好的解决方案，因为它具有灵活性。

这是一个描述转换和渲染全过程的视频 https://www.youtube.com/watch?v=vs6GOlgUSc8

Airbnb's Lottie Library

用于创建 AnimatedVectorDrawable 的工具

Tools for creating AnimatedVectorDrawable

android

android-animation

material-design

android-vectordrawable

一些使用 Lottie 设计的动画图标。

布局中使用的动画图标