SVG动画

SVG简介

什么是SVG：

• SVG矢量动画机制，Google在Android 5.x版本中增加了对SVG的支持

• SVG特性：

  • 可伸缩矢量图形
  • 定义用于网络的矢量图形
  • 使用XML格式定义图形
  • 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • 符合万维网联盟标准
  • 与注入DOM和XSL之类的W3C标准是一个整体

• Bitmap和SVG图像的区别：

  1. Bitmap是位图，由像素点组成，放大或者缩小就会失真，而SVG不会失真
  2. SVG使用XML格式定义图形，修改容易
  3. SVG由点来存储，由计算机根据点信息绘图，不会失真，无需根据分辨率及进行适配
  4. SVG的占用空间比Bitmap小
  5. SVG可以转化为Path路径，与Path动画相结合

具体使用：

• 标准的SVG语法中支持很多标签，rect, circle, line， polyline，ellipse, polygon， path等标签
• Android通过一种简化的方式对SVG进行兼容即Path标签

vector标签与图像显示

• 将下面的代码放在drawable目录下，并使用控件展示：

属性解释：

• 首先我们使用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)函数

具体讲解某些函数

• android:trimPathStart属性：

指定路径从哪里开始，取值0~1, 表示路径开始的位置的百分比，当取值为0表示从头开始，取值为1的时候表示不显示该路径

• android:trimPathEnd属性：

指定路径的结束位置，取值为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图像：

1. 设计软件：软件地址
2. Iconfont：阿里巴巴矢量图库 将想要的矢量图打包成一个.ttf文件

引入SVG图像：

1. 在线转换：传送门 直接将图片拖入并直接拷贝出xml就可以
2. 通过android studio引入：drawable右键new选择Vector asset
   

eg:

• 使用ImageView显示SVG图像

上述的两种使用方式基本没有差别，第二种主要是为了做兼容

• 在Button，RadioButton中使用
  • Button并不能使用src或者srcCompat, 需要通过selector来使用

动态Vector

• 首先声明一个Vector svg图像
• 然后在Animator文件下定义一个Animator文件
• 然后在drawable目录下创建一个animate-vector标签的文件

 
 
    android:drawable="@drawable/svg_first">    
    
        android:name="bar"       
        
        android:animation="@animator/anim_trim_svg"/>