SVG动画
原创
©著作权归作者所有：来自51CTO博客作者wx5ba8dc11102bc的原创作品，请联系作者获取转载授权，否则将追究法律责任
SVG简介
什么是SVG：
- SVG矢量动画机制，Google在Android 5.x版本中增加了对SVG的支持
- SVG特性：
- 可伸缩矢量图形
- 定义用于网络的矢量图形
- 使用XML格式定义图形
- 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- 符合万维网联盟标准
- 与注入DOM和XSL之类的W3C标准是一个整体
- Bitmap是位图，由像素点组成，放大或者缩小就会失真，而SVG不会失真
- SVG使用XML格式定义图形，修改容易
- SVG由点来存储，由计算机根据点信息绘图，不会失真，无需根据分辨率及进行适配
- SVG的占用空间比Bitmap小
- SVG可以转化为Path路径，与Path动画相结合
具体使用：
- 标准的SVG语法中支持很多标签，rect, circle, line， polyline，ellipse, polygon， path等标签
- Android通过一种简化的方式对SVG进行兼容即Path标签
vector标签与图像显示
- 将下面的代码放在drawable目录下，并使用控件展示：
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="50"
android:viewportWidth="100">
<path
android:name="bar"
android:pathData="M50, 23, L100,25"
android:strokeWidth="2"
android:strokeColor="@android:color/darker_gray"/>
</vector>
属性解释：
- 首先我们使用width和height定义一个SVG画布，而viewportWidth和viewportHeight指的是将画布的宽和高分为多少个点，而path中的点的坐标都是以viewportWidth和viewportHeight的点数为坐标的，而不是dp值。
- width和height属性：表示SVG图形的具体大小
- viewportWidth与viewportHeight属性：表示SVG图形划分的比例
path标签和常用属性
path标签有如下几个常用属性：
android:name: 声明一个标记，类似于ID，便于对其作动画的时候找到该ID
android:pathData:对svg矢量图的描述
android:strokeWidth：画笔的宽度
android:fillColor：填充颜色
android:fillAlpha：填充颜色的透明度
android:strokeColor：描边颜色
android:strokeWidth：描边宽度
android:strokeAlpha：描边透明度
android:strokeLineJoin：用于指定折线拐角的形状，取值有miter(jiehechu为锐角)、round(结合处为 圆弧)、bevel(结合处为直线)
android:strokeLineCap：画出直线的终点的形状（线帽）， 取值有butt(无线帽）、round（圆形线帽）、square(方形线帽）
android:strokeMiterLimit：设置斜角的上限，当strokeLineJoin的属性值为round和bevel的时候这个属性无效，当strokeLineJoin设置为miter的时候，锐角相交的时候斜面会变得相当长，苏哦一该属性的上限默认值为10
android:strokeLineJoin的效果对应于paint.setStrokeJoin(Paint.Join, join)函数， android:strokeLineCap对应于Paint.setStrokeCap(Paint.Cap, cap)函数
具体讲解某些函数
指定路径从哪里开始，取值0~1, 表示路径开始的位置的百分比，当取值为0表示从头开始，取值为1的时候表示不显示该路径
指定路径的结束位置，取值为0~1, 表示路径结束位置的百分比，当取值为1时，路径正常结束，当取值为1时，路径正常结束，当取值为0时，路径不显示
- android:trimPathOffset属性：
该属性指定结果路径的位移距离，取值为0~1,当取值为 0时，不进行位移，当取值为1时，位移整条路径的长度
- android:pathData属性，在path标签中，主要通过pathData属性来指定SVG图像的显示内容，所以我们来看 pathData的属性：
M = moveTo(MX, Y)：将画笔移动到指定的坐标位置
L = lineTo(L X, Y)：画直线到指定的坐标位置
H = horizontal lineTo(H X)：画水平线到指定的X坐标的位置
V = vertical lintTo(V Y)：画垂直线到指定的Y坐标的位置
C = curveto(C, X1, Y1， X2, Y2, ENDX ，ENDY)：三阶贝济埃曲线
S = smooth curveto(S, X2, Y2, ENDX, ENDY)：三阶贝济埃曲线，这里会将上一个指令的终点绘制成这条指令的起点
Q = quadratic Belzier curve(Q, X, Y, ENDX, ENDY)：二阶贝济埃曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY）：映射前面路径后的终点
A = elliptical Arc(A RX, RY， XROTATION，FLAG1, FLAG2, X, Y)：弧线
Z = closepath()：关闭路径
eg: A指令画一条弧线， 且弧线不闭合，A指令的各参数如下：
RX， RY指所欲椭圆的半轴大小
XROTATION指椭圆X轴和水平方向顺时针方向的夹角，即一个水平的椭圆绕着中心点顺时针旋转XROTATION角度
FLAG1只有两个值，1表示大角度弧度，0表示小角度弧度
FLAG2只有两个值。确定从起点到终点的方向，1表示顺时针，0表示逆时针
X, Y为终点坐标
注意：
- 坐标轴以（0, 0）为原点，x轴水平向右， y轴水平向下
- 所有指令大小写均可，大写表示绝对定位，小写表示相对定位，所参照的对象一个是全局坐标一个是局部坐标
- 指令和数字间的空格可以省略
- 同一指令出现多次可以只用一个
group标签:
- path标签用于定义可绘图的路径，而group标签则用于定义一系列路径或者将path标签分组，主要应用于动画中，通过group标签可以将原本有一个path路径实现的内容分为多个path路径，每一个path指定一个特定的动画
group标签的使用十分的随意：
group标签的使用：
- android:name：组的名字，用于与动画相关联
- android:rotation：指定该组图像的旋转度数
- android:pivotX：定义缩放和旋转该组时的X参考点，该值是相对于Vector的viewport值来确定的
- android:pivotY：定义缩放和旋转该组时的Y参考点，该值是相对于Vector的viewport值来确定的
- android:scaleX：指定该组X轴缩放大小
- android:scaleY：指定该组Y轴缩放大小
- android:translateX：指定该组沿着X轴平移的距离
- android:translateY：指定该组沿着Y轴平移的距离
制作SVG图像：
- 设计软件：软件地址
- Iconfont：阿里巴巴矢量图库 将想要的矢量图打包成一个.ttf文件
引入SVG图像：
- 在线转换：传送门 直接将图片拖入并直接拷贝出xml就可以
- 通过android studio引入：drawable右键new选择Vector asset
eg:
<ImageView
android:id="@+id/svg_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/rotation" 或者app:srcCompat="@drawable/svg_first" />
上述的两种使用方式基本没有差别，第二种主要是为了做兼容
- Button并不能使用src或者srcCompat, 需要通过selector来使用
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/svg_first"
android:state_pressed="true" />
<item
android:drawable="@drawable/svg_first"/>
</selector>
<Button
android:id="@+id/btn_svg"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/selector_first"/>
动态Vector
- 首先声明一个Vector svg图像
- 然后在Animator文件下定义一个Animator文件
- 然后在drawable目录下创建一个animate-vector标签的文件
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
<!--指定Vector图像-->
android:drawable="@drawable/svg_first">
<target
<!--通过target标签和动画相关联，target的name就是指定Vector中的path的name， 两者必须相同， target标签就是将path和动画进行绑定，可以有多个target标签-->
android:name="bar"
<!--绑定动画-->
android:animation="@animator/anim_trim_svg"/>
</animated-vector>
