什么是矢量动画？我们为何要使用它？如何生成？和SVG有什么区别?
image.png
一、矢量图SVG和VectorDrawable
1.1 SVG和Vector差异
- SVG----前端中使用，是一套有很多标签的语法规范
- Vector----在Android中使用，Vector只实现了SVG语法的Path标签
1.2 Android不直接使用SVG的原因
SVG解析效率低下，Android只使用Path标签去绘制图形，语句复杂但是效率大大提升了，和canvas理由类似。同时，文件体积上，vector<svg<<png
1.3 Vector语法
pathData标签一般由字母跟数字组成，字母多为命令关键字（这里有个大小写的区别，大写的字母是基于原点坐标系的偏移量，即绝对位置；小写字母是基于当前点坐标系的偏移量，即相对位置），数字多为坐标，
M(x y): 没什么好说的，移动画笔到指定点，并不进行绘制，默认在(0,0)点。与Paint里面moveTo可以理解成一样的概念
L(l) (x y) : 画直线，与它类似的有H(h)跟V(v)。这里有一个方向的概念，pathData中的方向与View绘制的方向是一样的。H就是画一条横线，V就是画一条竖线，L就是画点到点之间的线
Z :没有参数，就是连接起点跟终点
二、生成矢量图VectorDrawable
2.1 as自带
- 右键res，选择vector asset后选择
2.2 svg导入
2.3 自己编写
如下,其中android:viewportHeight表示把宽高分成几份，这样在pathData中可以用份数做单位，从而下次可以直接改宽高dp，而不用改pathData
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="200"
android:viewportWidth="200">
<path
android:fillColor="#dc33cdcd"
android:pathData="M100,100 L150,100 L150,150 L100,150 Z"/>
</vector>
效果图就是一个青色的正方形：
效果图.png
三、VectorDrawable兼容性
3.1 兼容性的坎坷之路
- Android L （5.0）是它的诞生，但是只允许API>=21的设备使用，基本残废
- **Gradle Plugin 1.5 **是一个里程碑，设备>=21则使用vector，设备<21则将vector在编译时转化为png使用，局限性很大
- AppCompat 23.2 才是真正的春天，静态vector支持到android2.1+，动态vector支持到android3.0+，于是几乎兼容所有的设备
四、静态VectorDrawable的配置与应用
4.1 gradle项目配置
- app子项目的
bulid.gradle下添加一句话：
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
-
确保
AppCompat兼容库版本为23.2以上 -
同时更新根目录下
bulid.gradle中的**Gradle Plugin **版本，至少要升级到2.1以上，否则还是会自动转换vector为png(原因见3.1）
classpath 'com.android.tools.build:gradle:2.3.1'
4.2 控件使用vectorDrawable
4.2.1 ImageView/ImageButton
ImageView/ImageButton设置背景，直接用标签app:srcCompat
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
app:srcCompat="@drawable/ic_camera"
/>
4.2.2 Button
Button设置背景不能直接使用标签app:srcCompat，只能利用selector标签间接引用
-
selector文件如下：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_rec" android:state_pressed="false"/>
<item android:drawable="@drawable/ic_camera" android:state_pressed="true"/>
</selector>
-
Button设置背景为selector:
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_below="@id/camera_imageview"
android:background="@drawable/button_bg"/>
-
大坑注意
还要在代码中加以下这句话：
static {
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}
4.3 总结
使用低版本的手机进行实验，若是显示成功则说明配置成功了。
最终效果图：
vector.gif
网友评论