android：SVG矢量绘制静态图标与动画

最新推荐文章于 2021-12-09 11:41:12 发布

雨幕青山

最新推荐文章于 2021-12-09 11:41:12 发布

阅读量2.5k

点赞数

分类专栏： android-优化文章标签： android svg 矢量图动画图片

本文链接：https://blog.csdn.net/JJ583500596/article/details/73294415

版权

android-优化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在app优化瘦身时，res文件夹下的图片资源让道长一顿的抓耳挠腮。道长发现在app的res文件加下基本分为三种：图标、背景图、默认图。然后图标可以用SVG矢量动画绘制。矢量动画绘制的图片有一下两种优点：1，图像在改变尺寸的时候，图像不会损失质量。所以可以在drawable中只放一套图片，不需要为不同分辨率设计多套图标；2，创建高效率以及动作丰富的动画。所以我们说一下SVG矢量动画。

一、简介

可伸缩矢量图形(Scalable Vector Graphics，简称SVG)是在Android 5.0之后被引入的，在此之前小伙伴们一直通过第三方开源框架来使用SVG。

1.SVG常用指令

绘制直线（L）：绘制直线到指定坐标
示例：L X，Y
绘制直线（H）：绘制水平线到指定X坐标
示例：H X
绘制直线（V）：绘制垂直线到指定Y坐标
示例：V Y
移动（M）
将画笔移动到某一点，但是没有绘制动作。
示例：M X，Y
绘制三次贝塞尔曲线（C、S）
示例：C X1，Y1，X2，Y2，Xend，Yend/S X2 ,Y2，Xend，Yend
绘制二次贝塞尔曲线（Q）
示例：Q X，Y，Xend，Yend
绘制弧线（A）
A 指令用来绘制一段弧线且允许弧线不闭合。
示例：A Xr，Yr，Xrotation，Flag1，Flag2，X，Y
参数解读：
1.Xr，Yr是所在椭圆的半轴大小
2.Xrotation是水平方向的椭圆绕中心点顺时针方向旋转Xrotation度
3.Flag1只有两个值，1表示大角度弧线，0表示小角度弧线
4.Flag2确定从起点到终点的方向，1为顺时针，0为逆时针
5.X，Y为终点坐标
关闭路径（Z）

注意：
1.所有指令大小写均可。大写为绝对定位（参照全局坐标系）；小写为相对定位（参照父容器坐标系）。
2.指令和数据之间的空格可以省略。
3.同一指令出现多次可以只用一个。

2.SVG编辑器

SVG参数写法固定而且复杂，如果你想自己编写SVG你会有脑浆爆出的感觉。下面给你们举个例子：
许多app中都会使用的图标如下：
这里写图片描述

然后再看看SVG编码如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24">

    <group
        android:translateX="-240.000000"
        android:translateY="-35.000000">
        <group
            android:translateY="24.000000">
            <group
                android:translateX="240.000000"
                android:translateY="11.000000">
                <path
                    android:name="Bounds"
                    android:fillColor="#FFFFFF"
                    android:fillAlpha="0.12"
                    android:pathData="M 12 0 C 18.627416998 0 24 5.37258300203 24 12 C 24 18.627416998 18.627416998 24 12 24 C 5.37258300203 24 0 18.627416998 0 12 C 0 5.37258300203 5.37258300203 0 12 0 Z"/>
                <path
                    android:name="Shape"
                    android:fillColor="#FFFFFF"
                    android:pathData="M19.8623112,11.2535396 C19.8623112,11.2535396 19.5718083,11.1442885
18.7313626,11.0667565 C17.7037276,10.9717556 17.3937245,10.5865956
17.0519087,10.1070909 L17.0450336,10.1070909 C17.0024707,9.99312103
16.9568765,9.88058868 16.9066885,9.7703376 L16.9106573,9.76636881
C16.8130939,9.18573814 16.7602809,8.69398334 17.4197873,7.90013184
C17.9588551,7.251188 18.0874501,6.96831024 18.0874501,6.96831024
C17.9609488,6.64727585 17.6567896,6.34317913 17.6567896,6.34317913
C17.6567896,6.34317913 17.3525366,6.03898866 17.0316585,5.91267493
C17.0316585,5.91267493 16.7487807,6.04092618 16.0998369,6.5802127
C15.3059854,7.23965664 14.8141994,7.18668737 14.2335999,7.08934267
L14.2295999,7.09328021 C14.1194738,7.04312347 14.0070977,6.99771677
13.8928779,6.95493511 L13.8928779,6.94824754 C13.4133419,6.6065567
13.0282132,6.29620992 12.933181,5.26857489 C12.855524,4.42853543
12.7464292,4.13765759 12.7464292,4.13765759 C12.4298948,4 11.9998906,4
11.9998906,4 C11.9998906,4 11.5696989,4 11.2534146,4.13765759
C11.2534146,4.13765759 11.144101,4.42856669 11.066569,5.26857489
C10.9715368,6.29620992 10.5861893,6.6065567 10.1069034,6.94824754
L10.1069034,6.95493511 C9.99293352,6.99771677 9.88033868,7.04309222
9.7701501,7.09309271 L9.76633756,7.08934267 C9.18573814,7.18706237
8.69395209,7.23981289 7.90010059,6.58043145 C7.25121925,6.04133243
6.96796648,5.91283118 6.96796648,5.91283118 C6.6469321,6.03948867
6.34321038,6.34317913 6.34321038,6.34317913 C6.34321038,6.34317913
6.03898866,6.64765086 5.91267493,6.96846649 C5.91267493,6.96846649
6.04076993,7.2513755 6.58024395,7.90013184 C7.23962539,8.69395209
7.18615611,9.18573814 7.08912392,9.76636881 L7.09312396,9.7703376
C7.04290472,9.88058868 6.99752927,9.99312103 6.95471635,10.1070909
L6.94806004,10.1070909 C6.60658795,10.5867831 6.29620992,10.9717556
5.26863739,11.0667565 C4.42853543,11.1444448 4.13731384,11.2539146
4.13731384,11.2539146 C4,11.5705114 4,12.0000781 4,12.0000781 C4,12.0000781
4,12.4304261 4.13765759,12.7465542 C4.13765759,12.7465542 4.42819168,12.856024
5.26844989,12.9333685 C6.29605367,13.0284007 6.6060567,13.4139982
6.94806004,13.8930654 L6.9547476,13.8930654 C6.99756052,14.0072852
7.04290472,14.1196613 7.09315521,14.2298187 L7.08915517,14.2337874
C7.18690612,14.8144806 7.23962539,15.3061729 6.5802752,16.1000244
C6.04114493,16.748937 5.91251868,17.0321898 5.91251868,17.0321898
C6.03936367,17.3530679 6.34299163,17.6569771 6.34299163,17.6569771
C6.34299163,17.6569771 6.6474321,17.9612301 6.96831024,18.0873251
C6.96831024,18.0873251 7.25103175,17.9593863 7.89997559,17.4199123
C8.69379584,16.7605309 9.18576939,16.8140001 9.76618131,16.9109073
L9.77018135,16.9069073 C9.88036993,16.957064 9.99296478,17.0022832
10.1069346,17.0452524 L10.1069346,17.0521275 C10.5865956,17.3936308
10.9715681,17.7039776 11.0666003,18.7316126 C11.1442573,19.5716521
11.2535708,19.8628737 11.2535708,19.8628737 C11.5702927,20.0001563
11.9998906,20.0001563 11.9998906,20.0001563 C11.9998906,20.0001563
12.4302386,20.0001563 12.7464292,19.8624987 C12.7464292,19.8624987
12.8559302,19.5719333 12.933181,18.7315814 C13.0282132,17.7039463
13.4137794,17.393912 13.8928779,17.0520962 L13.8928779,17.0452211
C14.0070977,17.002252 14.1194738,16.957064 14.2295999,16.906876
L14.2335999,16.9108761 C14.8141994,16.8133126 15.3059542,16.7604996
16.0998369,17.4198811 C16.748812,17.9590426 17.032096,18.0876688
17.032096,18.0876688 C17.3529429,17.9607926 17.6567896,17.6569771
17.6567896,17.6569771 C17.6567896,17.6569771 17.9609488,17.3527241
18.0874501,17.031846 C18.0874501,17.031846 17.9591988,16.7489058
17.4197873,16.1000244 C16.7602809,15.3062042 16.8134376,14.8144806
16.9106573,14.2337874 L16.9066885,14.2298187 C16.9568453,14.1196613
17.0024395,14.0072852 17.0450336,13.8930654 L17.0519087,13.8930654
C17.393412,13.4136544 17.7037276,13.0284007 18.7313626,12.9333685
C19.5714021,12.8557115 19.8626549,12.7465542 19.8626549,12.7465542
C20,12.4300823 20,12.0000781 20,12.0000781 C20,12.0000781 19.9999687,11.5697302
19.8623112,11.2535396 L19.8623112,11.2535396 Z M11.9998906,15.7415834
C9.93346419,15.7415834 8.25835409,14.0665046 8.25835409,12.0000781
C8.25835409,9.9336517 9.93346419,8.25857284 11.9998906,8.25857284
C14.0662858,8.25857284 15.7413959,9.9336517 15.7413959,12.0000781
C15.7413959,14.0665046 14.0662858,15.7415834 11.9998906,15.7415834
L11.9998906,15.7415834 Z"/>
            </group>
        </group>
    </group>
</vector>

有些小伙伴会说SVG编码如此麻烦我还是让UI切图吧，其实完全可以使用SVG编辑器输出SVG代码，传送门：http://editor.method.ac/

点击使用浏览器打开，界面如下：
这里写图片描述

使用方法如下：

首先绘制图标
道长身上的艺术细菌不多只能用工具画一个心，相信小伙伴们的艺术造诣肯定比我高：
输出SVG编码
绘制完成后点击View中的Source…选项结果如下：
把“d=”后的数据考到文件中
关于android studio中的xml文件咱们等下再说，先看一下效果：
其他工具
当然还有很多其他更专业的SVG编辑软件，比如Inkscape等，Inkscape的编辑界面如下，这个Inkscape软件道长还没耍六，只是给大家看一看，如果需要的话，点击传送门Inkscape Download：

二、SVG的使用

SVG在android中的使用大概分为两类：静态SVG图形(VectorDrawable)，动态SVG图形(AnimatedVectorDrawable)。

1.静态SVG图形

SVG编码的最小单位就是path，通过path与group的组合我们便可以编辑各种图形。

根标签vector

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
</vector>

属性解读：
height/width：设置SVG图标在app中展示的宽高
viewportHeight/viewportWidth：设置SVG图标划分的比例，比如上面代码便是把SVG图标分为400份。
注意：
如果height/width的比例与viewportHeight/viewportWidth的比例不一致，图标就会变形。

group标签与path标签

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportHeight="400"
    android:viewportWidth="400">

    <group
        android:name="test"
        android:rotation="0">

        <path
            android:fillColor="#C97A86"
            android:pathData="M 47.53508,169.71962 43.208216,138.26645 14.84488,123.99954 43.421547,110.16488 48.225437,78.781027 70.213653,101.68391 101.54596,96.554534 86.558754,124.54395 101.11929,152.75768 69.868476,147.15321 Z" />

        <path
            android:fillColor="#C97A86"
            android:pathData="m 174.07727,179.48697 -24.75315,11.09679 -4.89167,26.68199 -18.20282,-20.11254 -26.887689,3.59293 13.503189,-23.52703 -11.72584,-24.46143 26.54825,5.57204 19.64073,-18.71093 2.90453,26.97074 z" />
    </group>

</vector>

属性解读：
fillColor：设置SVG图标填充颜色
pathData：SVG图标所用到的指令数据
strokeColor：设置SVG图标的线条颜色
strokeWidth：设置SVG图票线条的宽度

当然SVG图标的属性还有很多，道长只是说一下常用的属性。然后这个SVG图标就可以拿来在App中当图标了。

2.动态SVG图形

根标签animated-vector

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

    <target
        android:animation="@anim/anim_switch"
        android:name="test"

</animated-vector>

属性解读：animated-vector中的drawable设置的即为静态SVG图标
name：即为设置的静态SVG图标中的name值
animation：设置静态SVG图标的动画

注意：target中的name属性值要与设置的静态SVG图标中的name值一致，否则动画找不到目标图标。

在布局文件中使用就简单了，代码如下：

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_favorite_no"/>

然后在代码中开启动画，代码如下：

((Animatable)imageView.getDrawable()).start();

到这里SVG矢量绘制静态图标与动画基本上就说完了，这些只是一些基本的使用，希望能给小伙伴们一些帮助。好了，道长画画去了，这些图标什么时候能弄完啊，这与道长的文艺青年的想象有些差别啊。

参考：
徐宜生徐大大的《Android群侠传》

雨幕青山

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
android：SVG矢量绘制静态图标与动画

在app优化瘦身时res文件夹下的图片资源让道长一顿的抓耳挠腮。道长发现在app的res文件加下基本分为三种：图标、背景图、默认图。然后图标可以用SVG矢量动画绘制。矢量动画绘制的图片有一下两种优点：1，图像在改变尺寸的时候，图像不会损失质量。所以可以在drawable中只放一套图片，不需要为不同分辨率设计多套图标；2，创建高效率以及动作丰富的动画。所以我们说一下SVG矢量动画。一、简介可伸缩矢量图
复制链接

扫一扫

专栏目录