Android资源res之矢量图完全指南（加SVG-path命令分析）

零、前言

第一次接触SVG时，被它的强大折服，下面两个小例子可以看看
SVG 文字sin型曲线动画、SVG绘制星空效果
Android5.0+也支持矢量图VectorDrawable，是变异削弱版的SVG,但已经非常强大了
本来不想写SVG的path的，但是发现需要用到，还是总结一下吧

---

留图镇楼

手撕路径动画：

path变形	变形+旋转

常规动画

 

---

一、SVG的Path

1.SVG中的Path(有点反人类,可忽略)

命令 含义
M/m (x,y)+ 移动当前位置
L/l (x,y)+ 从当前位置绘制线段到指定位置
H/h (x)+ 从当前位置绘制,水平线到达指定的 x 坐标
V/v (x)+ 从当前位置绘制竖直线到达指定的 y 坐标
Z/z 闭合当前路径
C/c (x1,y1,x2,y2,x,y)+ 从当前位置绘制三次贝塞尔曲线到指定位置
S/s (x2,y2,x,y)+ 从当前位置光滑绘制三次贝塞尔曲线到指定位置
Q/q (x1,y1,x,y)+ 从当前位置绘制,二次贝塞尔曲线到指定位置
T/t (x,y)+ 从当前位置光滑绘制,二次贝塞尔曲线到指定位置
A/a (rx,ry,xr,laf,sf,x,y)  从当前位置绘制弧线到指定位置

---

2.一开始觉得挺好玩,但是看到…

剑.png

---

3.SVG转为Android可用Xml

下载的svg在Android可不能直接用哦,你有3种选择：

3.1--AS自带的转换

AS自带转换.png

---

3.2--网上在线转换:网址

在线转换.png

---

3.3--批量转化：

前两者都是单文件的转化,如果很多文件就有一个一个来
so,我自己写了工具类,批量转化一下：详情可见：第三个工具
工具现在已经使用正则匹配了，更加精确,转换1000+,暂无失误情况

svg2xml.png

---

二、VectorDrawable的使用

vector一览：

vector.png

path标签一览：

path属性一览.png

---

1.修改颜色:两种方法

矢量剑.png

方法1：直接改：fillColor
方法2：使用时：android:tint="@color/red"

---

2.分组与变换(吾王之剑岂可不正)

用group将path包起来就可以对path进行变换了

group变换.png

---

3.线条与填充

线条与填充.png

关于path的知识和填充模式在Android关于Path你所知道的和不知道的一切,讲的很详细，这里就不费神了

---

三、矢量动画

动画基本套路如下--简单画一个示意图：

矢量动画--路径动画.png

---

1:路径动画：trimPathEnd

路径动画.gif

---

1.1--矢量图主体：icon_close.xml

记得为path取个名字(随意)：android:name="trim_path"

---

1.2--objectAnimator动画：trim_path_animator.xml

---

1.3--动画承载体：anima_close.xml

---

1.4--使用

//点击时：
Drawable drawable = mIdIv.getDrawable();
if (drawable instanceof Animatable){
    ((Animatable) drawable).start();
}

---

2.常规动画

非要平移或缩放还是针对View吧，矢量图是有边界的，超出边界不显示

 

常规动画.gif

2.1:--颜色动画:color_animator.xml

---

2.2:--透明度动画:alpha_animator.xml

---

2.3：--旋转动画:rotation_animator_360.xml

---

2.3：矢量图：icon_setting.xml

---

3.4:动画整合：anima_setting.xml

使用同上，不赘述了

---

3.5:路径转换动画

左上角的箭头是不是很惊艳：,第一次看到还以为是代码的效果呢,原来矢量图也可以轻松实现

DrawerLayout与ToolBar结合

注意：对路径进行objectAnimator,前提，path操作符都要一一对应
好吧，看来想躲都躲不掉了，那就来看看svg的path吧

---

四、SVG的path全指南：

1.操作符：M/m,L/l,H/h,V/v

大写字母都是绝对坐标,小写字母是相对坐标(相对尾点)

mlhv.png

---

2.操作符：CSQT/csqt

注：小写字母也是相对坐标，只演示大写字母,小写字母自己对应一下就行了
C/c是三次贝塞尔：曾经写过一篇详细分析：详见
S/s是简化版的三次贝塞尔，根据一点，自动顺滑，具体怎么顺滑，看个大概吧…
Q/q是二次贝塞尔，三次的都会了，二次的还远吗?
T/t简易版二次贝塞尔，需要至少两个才能发挥曲线作用

cs.png

qt.png

---

3.操作符:A/a

a.png

A(rx, ry, xr, laf, sf, x,y)----绘制弧线--最复杂的命令
rx - （radius-x）弧线所在椭圆的 x 半轴长
ry - （radius-y）弧线所在椭圆的 y 半轴长
xr - （xAxis-rotation）弧线所在椭圆的长轴角度
laf - （large-arc-flag）是否选择弧长较长的那一段弧
sf - （sweep-flag）是否选择逆时针方向的那一段弧
x, y- 弧的终点位置

SVG弧线

---

五、路径属性动画

好了，知识储备有了，开始画图了，画个箭头和三横还不小case

path.png

箭头：M8,50, l100,0 M0,47, l40,40 M0,52 l40 -40
菜单：M0,50, l80,0 M0,80, l80,0 M0,20 l80 0

path变形	变形+旋转

---

1.将两个path字符串放入string.xml

直接写也可以，但复用不方便

    test
    M8,50, l100,0 M0,47, l40,40 M0,52 l40 -40 
    M0,50, l80,0 M0,80, l80,0 M0,20 l80 0

---

2.矢量图：path_test.xml

---

3.旋转动画：rotation_animator.xml

---

4.路径动画：path_animator.xml

---

5.矢量图文件：icon_path.xml

---

6.整合动画：anima_path.xml

ok,这样就行了，你可以随意定制两个路径，但必须保证两个路径的指令相同，不然会崩

---

声明

1----本文由张风捷特烈原创,转载请注明
2----欢迎广大编程爱好者共同交流
3----个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
4----看到这里，我在此感谢你的喜欢与支持