Android使用SVG实现今日头条下拉刷新动画

1 SVG的全称是Scalable Vector Graphics，叫可缩放矢量图形。它和位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图片质量下降。

2 Android L开始提供了新的API VectorDrawable 可以使用SVG（矢量图）类型的资源，在xml文件中的标签是vector。但想要好好的感受下SVG的使用，除了需要5.0之后的系统支持外，还需要使用AndroidStudio进行开发，因为AS已经支持通过右键创建SVG相关的文件（亲儿子的待遇，就像Nexus系列手机）。当然，eclipse也可以进行开发，只是没有智能提示和自动补全，一些属性需要记住手动敲进去。

3 这篇文章使用SVG实现今日头条的下拉刷新动画，体会一把SVG的用法（网上资料不多，毕竟国内对于系统更新的支持还是比较缓慢的）

效果

效果分析

1 方形顺时针在四个角中移动
2 线条根据方形的移动而变化（包括位置变化和长度变化两种）

实现分析

1 首先，使用vector标签创建初始形态的svg图形

<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android"    android:height="200dp"    android:viewportHeight="200"    android:viewportWidth="200"    android:width="200dp" >    <path        android:name="path1"        android:pathData="        M20,30         L100,30         M100,30         L100,90         M100,90         L20,90         M20,90         L20,30"        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" />    <path        android:name="path2"        android:pathData="        M120,30         L180,30 "        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" />    <path        android:name="path3"        android:pathData="        M120,60         L180,60"        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" />    <path        android:name="path4"        android:pathData="        M120,90         L180,90"        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" />    <path        android:name="path5"        android:pathData="        M20,120         L180,120"        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" />    <path        android:name="path6"        android:pathData="        M20,150         L180,150"        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" />    <path        android:name="path7"        android:pathData="        M20,180         L180,180"        android:strokeColor="@android:color/darker_gray"        android:strokeWidth="1" /></vector>

需要为每个path设置name属性，这是为了让系统找到要实现动画的元素

包含了两组宽高属性：
1 width和height：表示svg图形的具体大小
2 viewportWidth和viewportHeight：表示svg划分的比例
两者的关系：将100dp划分为100份，如果在绘制图形时使用坐标（20，20），则意味着该坐标位于该svg图形的（20，20）位置

svg指令（包括但不限于）
1 M：将画笔移动到某一个点上
2 L：代表从当前点绘制直线到指定点
3 A：用于绘制一段弧线，且允许弧线不闭合（可制定参数实现）
4 H：绘制水平线
5 V：绘制垂直线

2 通过animated-vector标签制定动画作用的path

<?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"    android:drawable="@drawable/vector" >    <target        android:name="path1"        android:animation="@animator/animator_path_one" />    <target        android:name="path2"        android:animation="@animator/animator_path_two" />    <target        android:name="path3"        android:animation="@animator/animator_path_three" />    <target        android:name="path4"        android:animation="@animator/animator_path_four" />    <target        android:name="path5"        android:animation="@animator/animator_path_five" />    <target        android:name="path6"        android:animation="@animator/animator_path_six" />    <target        android:name="path7"        android:animation="@animator/animator_path_sevent" /></animated-vector>

每个target里边的name属性与之前在vector中定义的name属性必须保持一致

3 动画实现（其中一个为例）

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="sequentially" >    <objectAnimator        android:duration="400"        android:interpolator="@android:interpolator/decelerate_cubic"        android:propertyName="pathData"        android:valueFrom="        M20,30         L100,30         M100,30         L100,90         M100,90         L20,90         M20,90         L20,30"        android:valueTo="        M100,30         L180,30         M180,30         L180,90         M180,90         L100,90         M100,90         L100,30"        android:valueType="pathType" />    <objectAnimator        android:duration="400"        android:interpolator="@android:interpolator/decelerate_cubic"        android:propertyName="pathData"        android:valueFrom="        M100,30         L180,30         M180,30         L180,90         M180,90         L100,90         M100,90         L100,30"        android:valueTo="        M100,120         L180,120         M180,120        L180,180         M180,180         L100,180         M100,180         L100,120"        android:valueType="pathType" />    <objectAnimator        android:duration="400"        android:interpolator="@android:interpolator/decelerate_cubic"        android:propertyName="pathData"        android:valueFrom="        M100,120         L180,120         M180,120        L180,180         M180,180         L100,180         M100,180         L100,120"        android:valueTo="        M20,120         L100,120         M100,120        L100,180         M100,180         L20,180         M20,180         L20,120"        android:valueType="pathType" />    <objectAnimator        android:duration="400"        android:interpolator="@android:interpolator/decelerate_cubic"        android:propertyName="pathData"        android:valueFrom="        M20,120         L100,120         M100,120        L100,180         M100,180         L20,180         M20,180         L20,120"        android:valueTo="        M20,30         L100,30         M100,30         L100,90         M100,90         L20,90         M20,90         L20,30"        android:valueType="pathType" /></set>

1 定义了一个动画集合，里边包含了四个属性动画，而且为顺序执行（android:ordering=”sequentially”）
2 通过android:propertyName=”pathData”设置动画控制的属性为路径
3 android:valueFrom指定了动画的起始，android:valueTo指定了动画的结束
4 这里，还需要添加一个android:valueType=”pathType”来告诉系统是进行pathData变换

4 使用

经过上边的步骤，一个svg动画就实现了。

// 将该drawable设置给ImageView<ImageView    android:id="@+id/image"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_centerInParent="true"    android:src="@drawable/animated_svg" />// 启动动画（类似于AnimationDrawable的使用 ）Animatable animatable = (Animatable) imageView.getDrawable();animatable.start();

总结

经过上边的步骤，就使用svg实现了今日头条下拉刷新的动画。当然，这里只是用到了svg其中的一些知识；需要更多的了解svg，还是需要多些例子，多学习。