矢量图形SVG&高级动画

前言
          SVG，全名Scalable Vector Graphics可伸缩矢量图形，这种图像格式在前端已经是非常广泛了 ，矢量图像： SVG是W3C退出的一种开放标准的文本格式的矢量图形描述语言，他也是基于XML的、专门为网络而设计的图像格式，SVG是一种采用XML来描述而为图形的语言，所以它可以直接打开xml文件来修改和编辑位图图像： 位图图像的存储单位是图像上每一点的像素值，因而文件会比较大，像GIF、JPEG、PNG等都是位图图像格式   

SVG的语法
                M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
                L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
                H = horizontal lineto(H X)：画水平线到指定的X坐标位置
                V = vertical lineto(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)：弧线 ，相当于arcTo()
                Z = closepath()：关闭路径（会自动绘制链接起点和终点）

Part 1、基本用法
          Vector在Android中指代的是Vector Drawable,也就是Android中的矢量图。Vector图像刚发布的时候，只支持Android5.0+的，自从AppCompat 23.2之后，Vector可以使用于Android2.1以上的所有系统，只需要引用com.android.support:appcompat-v7:23.2.0以上的版本就可以了。但是这里的兼容并非真实的兼容，而是在低版本中生成PNG图片来替代SVG

tips:

1、android:width/android:height ： 矢量图形的大小

2、android:viewportwidth/android:viewportheight ： 定义图像被划分的比例大小，例如例子中的500，即把200dp大小的图像划分成500份

Vector Drawable相对于普通的Drawable来说，有以下几个好处：
        （1）Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片。
        （2）Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一。
        （3）使用简单，很多设计工具，都可以直接导出SVG图像，从而转换成Vector图像 功能强大。

        （4）不用写很多代码就可以实现非常复杂的动画 成熟、稳定，前端已经非常广泛的进行使用了。

下面推荐几个网址

SVG编辑器：http://editor.method.ac/

将SVG文件转化为VectorDrawable xml文件：http://inloop.github.io/svg2android/

众多SVG的图片：http://www.flaticon.com/

效果~

似乎看上去很简单，但当你要使用兼容矢量图的时候需要在build.gradle文件添加

//在gradle2.0及以上：
android {
  defaultConfig {
  vectorDrawables.useSupportLibrary = true
}}
//在gradle 1.5以前
android {
  defaultConfig {
    // Stops the Gradle plugin’s automatic rasterization of vectors
    generatedDensities = []
  }
  // Flag to tell aapt to keep the attribute ids around
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

这里只能用于AppCompatImageView或者AppCompatImageButton或其子类,而且必须在app:srcCompat标签中，如果你要使用TextView、Button的话就会报错，需要将图片依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable进行显示

在23.4.0之后需要手动开启

static {
  AppCompatDelegate.setCompatVectorFromSourcesEnabled(true);
}

这样便能在TextView、Button使用兼容的矢量图了

接下来说一下VectorDrawable的性能问题：

        1）当Vector比较简单时，其效率是一定比Bitmap高的，所以，为了保证Vector的高效率，Vector需要更加简单，PathData更加标准、精简，当Vector图像变得非常复杂时，就需要使用Bitmap来代替了
        2）Vector适用于ICON、Button、ImageView的图标等小的ICON，或者是需要的动画效果，由于Bitmap在GPU中有缓存功能，而Vector并没有，所以Vector图像不能做频繁的重绘
        3）Vector图像过于复杂时，不仅仅要注意绘制效率，初始化效率也是需要考虑的重要因素

Part 2、SVG的高级动画

效果~

tips:

1、画出相应图形

2、设置animated-vector动画

这里target的name值指代着图形path的name值

3、为每个path设置动画

anim_searchbar_in

anim_searchbar_out

效果~

可以仿照上面来定义自己的SVG动画

效果~

tips:

1、定义图形

这里的group标签的作用：1、对Path进行分组，由于我们后面需要针对Path进行动画，所以可以让具有同样动画效果的Path在同一个Group中。2、拓展动画效果，单个的path标签是没有translateX和translateY属性的，因此无法使用属性动画来控制path translateY，而group标签是有的，所以我们需要先将相关的path标签元素包裹在一个个的group标签中。

2、设置animated-vector动画