Android：获取并制作矢量图动画

秒速五厘米 2022-06-14 11:13 569阅读 0赞

通过上[一篇文章][Link 1]，我们理解了 Path Data 的命令，这样就可以绘制一些简单的矢量图，也可以看懂一些简单的矢量图。

但是，我们经常所看到的别人的矢量图，都并不简单，那么问题来了，这些复杂的矢量图我们怎么绘制呢？ 当然是用一些 [svg 编辑器][svg] 啦。 这个时候，你是不是感觉很兴奋呢，感觉可以开始画一些高逼格的矢量图。呃…，等等，你好像还是画不出来吧。 没错，其实，我也不会，这是 UI 设计师的工作呀。

## 矢量图资源 ##

既然自己没这个能力，那就伸手去拿现成的（但是不要养成习惯！）。例如，Android Studio 就可以生成很多矢量图。

“File->New->Vector Asset”

![step1][]

![这里写图片描述][SouthEast]

然后点击小机器人图标

![这里写图片描述][SouthEast 1]

可以看到，这里的矢量图其实还是很多的。

不过问题又随之而来了，这些矢量图都是黑白色的，能不能改下颜色呢？当然能，可以设置 tint 属性，例如

我们给 ImageView 设置了 `android:tint` 属性，这个时候，图片就不再是黑白色了。

![这里写图片描述][SouthEast 2]

喜欢搞事的你肯定不满足这点图标数量，肯定还想拥有更多的选择，那我就推荐 [阿里巴巴矢量图库][Link 2]，这下就问你满不满足。

## 对PathData做转换 ##

既然已经可以绘制PathData了，那么也应该可以对PathData做转换（缩放，旋转，位移），这个在Android中是用< group >标签包裹 < path >，然后对 < group > 做转换来实现的。 一个 < group > 可以包含多个 < path >，那么在做转换的时候，可以同时对多个 < Path > 应用转换。

< group > 转换属性如下  
1. `android:pivotX`, `andoid:pivotY`： 缩放，旋转的 x 轴和 y 轴的中心点，默认为原点（0,0）。  
2. `android:rotation`：旋转角度，默认为0  
3. `android:scaleX`，`android:scaleY`：x 轴和 y 轴的缩放的比例，默认为1  
4. `android:translateX`，`android:translateY`：x 轴和 y 轴的位移距离，默认为0

例如，我现在画一个播放按钮

<?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24">
    
        <path android:fillColor="@color/colorPrimary" android:pathData="M 6,6 L 18,12 6,18Z"/>
    </vector>

![播放按钮][SouthEast 3]

那么，我要让这个图形旋转90°

<?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportHeight="24" android:viewportWidth="24">
    
        <group android:pivotX="12" android:pivotY="12" android:rotation="90">
    
            <path android:fillColor="@color/colorPrimary" android:pathData="M 6,6 L 18,12 6,18Z"/>
    
        </group>
    </vector>

![转换90][90]

如上面所说，我们需要一个 < group > 包裹 < path >，然后设置旋转中心点，然后设置旋转角度。

## AnimatedVectorDrawable ##

AnimatedVectorDrawable 给矢量图添加属性动画，属性动画操作的是属性，也就是说 AnimatedVectorDrawbale 操作的是矢量图的属性。你可以用三个文件定义一个动画，或者只用一个文件定义一个动画。

### 多文件定义动画 ###

三个文件包括  
1. 一个 VectorDrawable 的 XML 文件  
2. 一个 AnimatedVectorDrawable 的 XML 文件  
3. 属性动画的 XML 文件 （ObjectAnimator 或者 AnimatorSet）

说起来比较抽象，举个例子

首先，我从 Android Studio 的 Vector Asset 导出一个笑脸图片，然后稍微整理了下，用重新命名为 satisfied.xml，这个作为动画的起始图片。

![smile][]

整个 Path 我没看懂，但是我找到了嘴型的 Path（后面一个 name 为 satisfied 的 path），我把这2个 Path 用一个 < group > 包含，是因为我想让这个2个 Path 做一个旋转转换。

然后，我还导出一个哭脸图片，也整理下了，命名为 dissatisfied.xml，这个作为动画的最终图片。其实这个是没必要导出的，我这里把这个矢量图放出来，是因为我想让大家看明白动画的最终矢量图是什么样的。

![cry][]

既然已经知道起始的和最终的 VectorDrawable 是什么，那么现在就需要定义一个 AnimatedVectorDrawable，命名为  
avd\_smile.xml

<?xml version="1.0" encoding="utf-8"?>
    <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/satisfied">
    
        <target android:animation="@animator/smile_rotation" android:name="group_satisfied"/>
        <target android:name="satisfied" android:animation="@animator/smile_morph"/>
    
    </animated-vector>

< animated-vector > 的 `android:drawable` 定义了动画的 VectorDrawable。

< target > 的 `android:name` 的值为 VectorDrawable 中的 < group > 和 < path > 的 `android:name`，也就是说，指定了动画的具体目标

< target > 的 `android:animation` 定了属性动画，这个属性动画由 ObjectAnimator 或者 AnimatorSet 定义。

看下第一个对 < group >动画，animator/smile\_rotation.xml

<?xml version="1.0" encoding="utf-8"?>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360"/>

很简单，就是一个旋转的动画

再看下第二个对 < path >的动画，animator/smile\_morph.xml

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android" android:ordering="sequentially">
        <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="pathData" android:valueFrom="M12,16c-1.48,0 -2.75,-0.81 -3.45,-2 L6.88,14c0.8,2.05 2.79,3.5 5.12,3.5s4.32,-1.45 5.12,-3.5h-1.67c-0.7,1.19 -1.97,2 -3.45,2" android:valueTo="M12,14 c-2.33,0 -4.32,1.45 -5.12,3.5 L 8.55,17.5 c0.69,-1.19 1.97,-2 3.45,-2s2.75,0.81 3.45,2h1.67c-0.8,-2.05 -2.79,-3.5 -5.12,-3.5" android:valueType="pathType"/>
    
        <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="pathData" android:valueFrom="M12,14 c-2.33,0 -4.32,1.45 -5.12,3.5 L 8.55,17.5 c0.69,-1.19 1.97,-2 3.45,-2s2.75,0.81 3.45,2h1.67c-0.8,-2.05 -2.79,-3.5 -5.12,-3.5" android:valueTo="M12,16c-1.48,0 -2.75,-0.81 -3.45,-2 L6.88,14c0.8,2.05 2.79,3.5 5.12,3.5s4.32,-1.45 5.12,-3.5h-1.67c-0.7,1.19 -1.97,2 -3.45,2" android:valueType="pathType"/>
    
    </set>

这个就有点复杂了，是一个动画集，并且定义了动画的执行顺序为 `android:ordering="sequentially` ，即顺序执行两个动画。

由于这是对 < path > 执行的动画，因此特别要注意 < objectAnimator > 的 `android:valueType` 的值为 `pathType`。

最后，就是 `android:valueFrom` 和 `android:valueTo`，分别对应笑脸或者哭脸的嘴型，因为我只想对嘴型做动画。

> 从 Android Studio 到处的笑脸和哭脸的嘴型 Path 是不能做矢量图动画的，那么要制作成矢量图动画，A 和 B 绘制命令需要满足如下条件  
> 1. A 和 B 要同样数量的命令，并且在每个对应位置，命令类型要一样。  
> 2. 命令后面的参数要完全一样

然后给 ImageView 设置 `android:src=@drawable/avd_smile`

然后设置点击 ImageView 启动动画

findViewById(R.id.smile_avd).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    ImageView imageView = (ImageView) v;
                    AnimatedVectorDrawable smileDrawable = (AnimatedVectorDrawable) imageView.getDrawable();
                    smileDrawable.start();
                }
            });

现在看下效果

![笑脸动画][SouthEast 4]

### 单XML文件定义动画 ###

官网上，给出了一个例子，然后给出了如何用单个 XML 文件生成动画例子，虽然不明觉厉，但是大体上还是看得懂的。不过没有用多文件生成动画来的清晰，但是官网为何要给这个例子呢，因为这个是用工具生成的，但是特么的官网也没告诉我到底可以用什么工具生成。不过我还是找到这个[在线工具][Link 3]。接下来，我一步一步告诉大家怎么制作矢量图动画。

首先从Android Studio 的 Vector Drawable 下载一个哭脸矢量图（这个我就不演示了），然后打开[https://shapeshifter.design/][Link 3] 这个网站，选择左下角的 `import -> Vector Drawable`，导入哭脸的图形。

![step1][step1 1]

导入完后，看到效果如下

![step2][]

然后，点击左下角的那个加号按钮，并选择“New group layer”

![step3][]

这个时候，效果是这样的

![step4][]

但是不要被这个层级所迷惑，图中所示的 path，path\_1，path\_2，grop 是平级的，因此这几个 path 并不在 group 中，不信的话自己双击 group 那一层，看是否这几个 path 会消失。 那么有人会问了，为何在 import vector drawable 之前就先 New group layer，那么我只能说，你试试看。 这点我就要吐槽下，太僵硬了。

那么现在，我们要把 path, path\_1, path\_2 拖动到 group 中，这个大家应该会操作吧，验证是否拖进去就是，你双击 group ，看那几个 path 是否消失。拖进去后效果如下

![step5][]

一切准备就绪后，首先要明白，我们需要对 group 做旋转动画，对嘴型的 path（也就是 path\_2）做动画。

那么首先设置 group 的旋转中心，点击 group 层，然后在右上角设置旋转的中心，设置后效果如下

![step6][]

然后，点击 group 层最右边的类似小闹钟按钮，选择 rotation，然后在右上角设置选择参数，效果如下

![这里写图片描述][SouthEast 5]

从截图中的右下方可以看到动画的时间轴，总时间是 300 ms，所以我在右上角中设置 endtime 为 300，并设置 tovalue 为360。到这里，< group > 的旋转效果就设置好，当你点击那个播放按钮的时候，就会看到旋转动画

![旋转][SouthEast 6]

然后为嘴型那个 path（也就是 path\_2 层）设置矢量图动画，点击 path\_2 层的右边的类似小闹钟按钮，然后选择 pathData，然后同上在右上角看到设置pathData数据

![这里写图片描述][SouthEast 7]

endTime 同样设置为了 300，那么这个 toValue 是关键，决定最终效果，刚刚我们不是从 Android Studio 下载了个笑脸矢量图嘛，那么这个就设置笑脸图形中的那个嘴型 Path。

到这了，你可以再点击播放按钮，不过首先，你得把事件坐标轴调整到 0ms 的地方。

![这里写图片描述][SouthEast 8]

到这了，你是不是有点兴奋了，接下来要导出来，点击左下角的 “export” ，然后选择 “Animated Vector Drawable”

![这里写图片描述][SouthEast 9]

你以为这就完了吗？你把这个导出文件放到 res/drawable 目录下，然后给上面例子中的 ImageView 设置 `android:src` 试试？ Boom ! App Crash! 那我就来告诉你，有哪几处错误，打开导出的文件，如果截图中就是错误点

![这里写图片描述][SouthEast 10]

刚才说过，要对 group 旋转，要对 path\_2 做动画，因此第一个红色圈，应为 group 名字，第一个红色圈应为 path\_2 的名字，也就是如下截图中所示

![这里写图片描述][SouthEast 11]

改完名字后，然后就是那个 valueFrom 和 valueTo 的错误，有的兄弟会认为，这不就是笑脸和哭脸的嘴型的 Path 吗？ 那你赋值粘贴进去试试，保证又是一声 Boom~ 。我当时看到 app crash 的心情就是想把这个网站的作者找出来到有关部门喝喝茶，因为我差点损失了一个键盘。

好了，回归正题，这2个值如何设置呢？我们再回到那个网站的界面，点击时间轴上关于 path\_2 动画的那一条线

![这里写图片描述][SouthEast 12]

按图中所示，把右上角那个 valueFrom 和 valueTo 复制粘贴到我们到处的文件中，这样才叫真正的完成。修改后的到处文件代码如下

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt">
        <aapt:attr name="android:drawable">
            <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
                <group android:name="group" android:pivotX="12" android:pivotY="12">
                    <path android:name="path" android:pathData="M 15.5 9.5 M 14 9.5 C 14 8.672 14.672 8 15.5 8 C 16.328 8 17 8.672 17 9.5 C 17 10.328 16.328 11 15.5 11 C 14.672 11 14 10.328 14 9.5" android:fillColor="#FF000000"/>
                    <path android:name="path_1" android:pathData="M 8.5 9.5 M 7 9.5 C 7 8.672 7.672 8 8.5 8 C 9.328 8 10 8.672 10 9.5 C 10 10.328 9.328 11 8.5 11 C 7.672 11 7 10.328 7 9.5" android:fillColor="#FF000000"/>
                    <path android:name="path_2" android:pathData="M 11.99 2 C 6.47 2 2 6.48 2 12 C 2 17.52 6.47 22 11.99 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 11.99 2 Z M 12 20 C 7.58 20 4 16.42 4 12 C 4 7.58 7.58 4 12 4 C 16.42 4 20 7.58 20 12 C 20 16.42 16.42 20 12 20 Z M 12 14 C 9.67 14 7.68 15.45 6.88 17.5 L 8.55 17.5 C 9.24 16.31 10.52 15.5 12 15.5 C 13.48 15.5 14.75 16.31 15.45 17.5 L 17.12 17.5 C 16.32 15.45 14.33 14 12 14 Z" android:fillColor="#FF000000"/>
                </group>
            </vector>
        </aapt:attr>
        <target android:name="group">
            <aapt:attr name="android:animation">
                <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="rotation" android:duration="300" android:valueFrom="0" android:valueTo="360" android:valueType="floatType" android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </aapt:attr>
        </target>
        <target android:name="path_2">
            <aapt:attr name="android:animation">
                <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:propertyName="pathData" android:duration="300" android:valueFrom="M 11.99 2 C 6.47 2 2 6.48 2 12 C 2 17.52 6.47 22 11.99 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 11.99 2 Z M 12 20 C 7.58 20 4 16.42 4 12 C 4 7.58 7.58 4 12 4 C 16.42 4 20 7.58 20 12 C 20 16.42 16.42 20 12 20 Z M 12 14 C 9.67 14 7.68 15.45 6.88 17.5 L 8.55 17.5 C 9.24 16.31 10.52 15.5 12 15.5 C 13.48 15.5 14.75 16.31 15.45 17.5 L 17.12 17.5 C 16.32 15.45 14.33 14 12 14 Z" android:valueTo="M 11.99 2 C 6.47 2 2 6.48 2 12 C 2 17.52 6.47 22 11.99 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 11.99 2 Z M 12 20 C 7.58 20 4 16.42 4 12 C 4 7.58 7.58 4 12 4 C 16.42 4 20 7.58 20 12 C 20 16.42 16.42 20 12 20 Z M 12 16 C 10.52 16 9.25 15.19 8.55 14 L 6.88 14 C 7.68 16.05 9.67 17.5 12 17.5 C 14.33 17.5 16.32 16.05 17.12 14 L 15.45 14 C 14.75 15.19 13.48 16 12 16 Z" android:valueType="pathType" android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </aapt:attr>
        </target>
    </animated-vector>

这个时候，你再把这个到处文件设置为 ImageView 的 `android:src` 属性，你就可以看到效果了

![最终效果][SouthEast 13]

## 结束 ##

我相信大家在刚接触矢量图的时候是懵逼的，更别提如何去制作矢量图动画，当然这也也是我的疑惑。 通过本篇文章，我们对如何生成矢量图，以及如何制作矢量图动画，心里就有个底了。

本篇文章，并没有把 VectorDrawable 和 AnimatedVectorDrawable 讲完全，由于篇幅限制，留在下一篇讲。

## 参考 ##

[https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html][https_developer.android.com_guide_topics_graphics_vector-drawable-resources.html]  
[http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html][http_www.androiddesignpatterns.com_2016_11_introduction-to-icon-animation-techniques.html]  
[https://shapeshifter.design/][Link 3]

[Link 1]: http://blog.csdn.net/zwlove5280/article/details/73196543
[svg]: http://editor.method.ac/
[step1]: /images/20220614/74546f6309a3449bbe202040395dd041.png
[SouthEast]: /images/20220614/3bedfd67ac8d491190b29b624c33aac7.png
[SouthEast 1]: /images/20220614/86f86518ad5a4509afd117ab012aeb7e.png
[SouthEast 2]: /images/20220614/56dca6d324924203b3dda0e3cc537473.png
[Link 2]: http://iconfont.cn/
[SouthEast 3]: /images/20220614/56d668556caa4d09bb69fbbc30c20b92.png
[90]: /images/20220614/518ff59efbcb446ebcb416a11f3ba1f4.png
[smile]: /images/20220614/f429865892824995bde73d676b241c5c.png
[cry]: /images/20220614/97838cb5e1c0463198ab7d195a0274fb.png
[SouthEast 4]: /images/20220614/935a2bb0d24644b6a8724ff579723e93.png
[Link 3]: https://shapeshifter.design/
[step1 1]: /images/20220614/ca8fe1f411834c8d8fcd2ee4ff740854.png
[step2]: /images/20220614/bf911d3e73b949febe69f40fdb55d0b6.png
[step3]: /images/20220614/e78d56ef826c4a1d8536d21da4ce539b.png
[step4]: /images/20220614/8b1e65bf75404f85b87268b7e41aa4ec.png
[step5]: /images/20220614/838d1ae6618342e2a2b523afe0630eef.png
[step6]: /images/20220614/dcafa4895c8a4f5385750026160e4dc7.png
[SouthEast 5]: /images/20220614/e17235ecf2864f41aeeb98b56ed564ad.png
[SouthEast 6]: /images/20220614/8f0f6ca780614bad97c840fa1475592d.png
[SouthEast 7]: /images/20220614/8b0906638eff4221ae12d0b614df4b53.png
[SouthEast 8]: /images/20220614/534fff112a3346d99c5e437989e69b7b.png
[SouthEast 9]: /images/20220614/cebc5ccdd9df49639d4bd628bab596c2.png
[SouthEast 10]: /images/20220614/92d63737dd4f497c8b2c6fe3817cf0f4.png
[SouthEast 11]: /images/20220614/4c5dcfc838304d94a2cf1e75d7caa06e.png
[SouthEast 12]: /images/20220614/3a64a0eaa6474ab2a374bcf3121004ff.png
[SouthEast 13]: /images/20220614/78bedba7e2d746b785444b343ee49523.png
[https_developer.android.com_guide_topics_graphics_vector-drawable-resources.html]: https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html
[http_www.androiddesignpatterns.com_2016_11_introduction-to-icon-animation-techniques.html]: http://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html