vector构造SVG矢量图-今日头条下拉刷新动画

      看到今日头条的下拉刷新动画，感觉很屌哎~~~然后就研究怎么实现的，本来以为是用逐帧动画实现的，谁知道不是自己所想的那样，而是使用的SVG矢量图实现的。

1、首先，SVG是个什么呢？

SVG全称：Scalable Vector Graphics，可缩放矢量图形。

SVG使用XML格式定义图形。

SVG图形在放大或者改变尺寸的情况下，其图形质量不会有所损失。

2、Android L，也就是Android 5.0开始提供API VectorDrawable来支持SVG资源的使用，在xml中使用的是vector标签。

3、类似今日头条下拉刷新的动画效果实现过程

1) 用vector标签创建初始形态的svg图形(也就是静态图形)(res/drawable下)
2) 通过animated-vector标签指定动画作用的路径(path)(res/drawable下)
3) 对对应的path实现具体的动画效果(res/animator下)

以上是实现的过程。下面是一些概念点：

实例：

<?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="200"
    android:viewportWidth="200">


    <path
        android:name="path1"
        android:fillColor="@color/black_overlay"
        android:pathData="
            M20,30
            L100,30
            M100,30
            L100,90
            M100,90
            L20,90
            M20,90
            L20,30"
        android:strokeColor="@color/black_overlay"
        android:strokeLineCap="round"
        android:strokeWidth="6" />
</vector>

1）vector标签是一个drawable对象，所以放在res/drawable目录下。

2）属性android:width 和 android:height 是定义矢量图绝对大小的，必须设置。

3）属性android:viewportHeight和android:viewportWidth 是定义画布大小的，必须设置。而且，定义path路径就是在画布中绘制的，超出画布就显示不出来了。

4）path标签中的 android:fillColor属性定义绘制颜色，android:pathData 定义绘制路径。

5）android:strokeColor 定义边线颜色，
android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square。
android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel。
android:strokeWidth定义边线宽度。

**主要说说pathData ———— 由一些指令实现。

指令规则：

指令由字母跟数字组成，数字之间可以用空格 或者 逗号 隔开。字母分大小写两种，大写 表示基于原点坐标系，即是绝对位置； 小写 表示基于当前点坐标系，即是相对位置。

常用指令：

1、M：将画笔移动到指定点
2、L：代表从当前点绘制直线到指定点
3、A：用于绘制一段弧线，并且允许弧线不闭合。
4、H：绘制水平线
5、V：绘制垂直线