一、前言
我们通常使用的图片有.jpeg.gif.png（三格图） 和.svg(矢量图）放大不失真，存储也方便。
- 1.三格图：是由一个一个像素点构成的，所以硬件对它处理的时候，非常大的优势。UPU可以根据每个像素点去做计算处理，所以加载数据会很快。
- 2.矢量图：是有CPU所计算的，绘制的速度会比三格图慢点，但是它的好处在于可缩放性。
如果对三格图进行一定极的缩放，那么图像的边缘会出现很多锯齿。那是因为三格图不具有缩放性的，那么矢量图不一样，因为它的每一个点是由CPU计算出来的。
所以经行任何比例的缩放，它都不会失真。这一点就是矢量图与三格图最大的差距。
二、什么是SVG
SVG--前端中使用，是一套语法规范。在android中就是矢量图。Vector ---在Android中使用，Vector只实现了SVG语法的Path标签。 SVG有很多语法格式，支持很多标签。Android使用Path标签来模拟其他所有的数据。虽然数据复杂点，但对它的解析效率很大帮助，这样既能保证兼容大部分的SVG图像，同时也极大的提高了解析的数据。Vector在Android的效率极大的提高。
三、Vector的常用的语法
Vector的常用的语法：是一个标注型语法。通过数组和字母的组合来描述一个路径。那么它不同的字母代表不同的含义。
M = moveto(M X,Y):将画笔移动到指定的坐标位置。
L = lineto(L X,Y):画直线到指定的坐标位置
Z = closepath():关闭路径
H = horizontal lineto(H X): 画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp" //定义图片的宽高
android:viewportWidth="200.0" //定义图像被划分的比例大小
android:viewportHeight="200.0"> //定义图像被划分的比例大小
<path
android:fillColor="#FF000000"
android:pathData="M50,50 L100,50 L100,100 L50,100 z"/>
</vector>
pathData 表述的是Vector具体的图像。
四、静态的VectorDrawbale
在控件中使用
ImageView\ImageButton
-----app:srcCompat = "@drawable/vector_image"
Button
-----通过Selector来进行设置,并开启下面的设置
state {
AppCompatDelegate
.setCompatVectorFromResourcesEnabled(true);
}
其中Vector_image的VectorDrawable的代码 （矩形图片）
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportWidth="200.0"
android:viewportHeight="200.0">
<path
android:fillColor="#FF000000"
android:pathData="M50,50 L100,50 L100,100 L50,100 z"/>
</vector>
五、动态的VectorDrawbale
VectorDrawable的优点：缩放不失真 和 使PNG的体积大幅度减小 还可以更好的使用动画。要使属性动画作用在具体的VectorDrawable中去，需要配置动画的粘合剂。
配置动画的粘合剂-----------animated-vector ( animated-vector +animator(属性动画))
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_arrow_forward_black_24dp">
<target
android:animation="@animator/animator"
android:name="left"/>
<target
android:animation="@animator/animator_right"
android:name="right"/>
</animated-vector>
向左平移属性动画
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:propertyName="translateX"
android:valueFrom="0"
android:valueTo="10"
android:valueType="floatType">
</objectAnimator>
向右平移属性动画
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:propertyName="translateX"
android:valueFrom="0"
android:valueTo="-10"
android:valueType="floatType">
</objectAnimator>
VectorDrawable箭头图片代码
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group android:name="left">
<path
android:fillColor="#FF000000"
android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</group>
<group android:name="right">
<path
android:fillColor="#FF000000"
android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</group>
</vector>
VectorDrawable属性动画代码实现
public void anim(View view) {
ImageView imageView = (ImageView) view;
Drawable drawable = imageView.getDrawable();
if(drawable instanceof Animatable) {
((Animatable)drawable).start();
}
}
VectorDrawable可以通过配置其长度、颜色、位置等属性值，以及配置动画的粘合剂，达到你预想不到的动画效果。
