Android中使用SVG实现炫酷动画效果

前言

SVG，即Scalable Vector Graphics 可伸缩矢量图形。这种图像格式在前端中已经使用的非常广泛，而在移动端的开发中，遇到一些复杂的自定义控件或者动画效果，我们就可以考虑使用SVG。

一.Vector Drawable

1.1 矢量图与位图

1.矢量图像：SVG是W3C 推出的一种开放标准的文本式矢量图形描述语言,他是基于XML的专门为网络而设计的图像格式
SVG是一种采用XML来描述二维图形的语言，所以它可以直接打开xml文件来修改和编辑。

2.位图图像：位图图像的存储单位是图像上每一点的像素值，因而文件会比较大，像GIF、JPEG、PNG等都是位图图像格式。

1.2 Vector Drawable简介

在Android中，SVG的实现方式就是Vector Drawable。这是个在5.0时增加的新类，所以对之前版本的兼容会有些问题。相对于普通的Drawable来说，Vector Drawable有以下几个好处：

（1）Vector图像可以自动进行适配，不需要通过分辨率来设置不同的图片。
（2）Vector图像可以大幅减少图像的体积，同样一张图，用Vector来实现，可能只有PNG的几十分之一。
（3）使用简单，很多设计工具，都可以直接导出SVG图像，从而转换成Vector图像，功能强大。
（4）不用写很多代码就可以实现非常复杂的动画。

1.3 Vector Drawable基本语法

Vector Drawable实际上是一个XML文件，咱们先来看一个vector的例子

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <path
        android:pathData="M 100 100 L 300 100 L 200 300 z"
        android:strokeColor="#000000"
        android:strokeWidth="5"
        android:fillColor="#FF0000"
        />
</vector>

这个vector画了一个三角形，可以从Android Studio的preview功能栏里预览，如下图：

这里写图片描述

对照着上面的代码，咱们来学习Vector Drawable的基本语法。这些语法开发者不需要全部精通，只要能够看懂，这些path标签及数据生成都可以交给工具来实现。

1.3语法

1.pathData标签
先看pathData标签，这里定义了vector中path的绘制，也是最重要的一部分。注意’M’处理时，只是移动了画笔，没有画任何东西。语法如下：

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()：关闭路径（会自动绘制链接起点和终点）

2.path标签
path标签的内容：

android:name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色，如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框，如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率，取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率，取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围 
android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限

3.vector标签
根元素 vector标签是用来定义这个矢量图的，该元素包含如下属性：

android:name 定义该drawable的名字
android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸，通常使用 dp
android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸，通常使用 dp
android:viewportWidth 定义矢量图视图的宽度，视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight 定义矢量图视图的高度，视图就是矢量图 path 路径数据所绘制的虚拟画布
android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in
android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候，是否自动镜像该图片。比如 阿拉伯语。
android:alpha 该图片的透明度属性

4.group标签
有时候我们需要对几个路径一起处理，这样就可以使用 group 元素来把多个 path 放到一起。 group 支持的属性如下：

android:name 定义 group 的名字
android:rotation 定义该 group 的路径旋转多少度
android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX 定义 X 轴的缩放倍数
android:scaleY 定义 Y 轴的缩放倍数
android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。

通过上面的属性可以看出， group 主要是用来设置路径做动画的关键属性的.

1.4 常用的工具

上面的这些语法只要能看懂就可以了。我们会用一些成熟的工具来辅助SVG在移动端的开发。

1.先说美工，SVG图一般直接让美工来帮你搞定就行了！像PS、Illustrator等等都支持导出SVG图片

2.获取到SVG图片后，我们要将其转换为vector drawable对象，这款插件svgtoandroid 用过都说好。
安装：File -> Setting -> Plugins -> Browser repositories -> 搜“svg2VectorDrawable” -> 安装并重启Android Studio，再次进来后顶部工具栏会多一个图标：

这里写图片描述

点击图标弹出对话框：

这里写图片描述

点击Generate就行了。勾选Batch选项，将对被选中文件夹中的.svg文件进行批量转换，这就是转换之后的效果：

这里写图片描述

3.如果没有SVG图片怎么办？可以使用SVG编辑器来进行SVG图像的创作和编写。

4.使用AndroidStudio自带的工具完成SVG添加，AS会自动生成兼容性图片(高版本会生成xxx.xml的SVG图片；低版本会自动生成xxx.png图片)。具体过程看Vector Asset Studio的使用

5.最后分享几个可以获取SVG资源的网站
http://www.shejidaren.com/8000-flat-icons.html

这里写图片描述

http://www.flaticon.com/

这里写图片描述

http://www.iconfont.cn/plus

这里写图片描述

1.5 项目中的配置

由于vector drawable是5.0之后才出来的东西，所以我们需要对之前的版本进行兼容。假设大家都使用Android Studio 2.2以上的版本，并且gradle版本在2.0以上。下面是配置的步骤：
1、添加

defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }

2、添加
compile ‘com.android.support:appcompat-v7:25.3.1’//这里具体看自己的版本

3、项目的Activity中都包含（通用做法是在BaseActivity中加）：

static {                      AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
      }

1.6控件中的使用

Vector Drawable可以理解为一张图片，所以能设置到其他的控件之中。

1.ImageView、ImageButton、AppCompatImageView（这是继承自ImageView用于5.0以下加载矢量图的控件）
xml中使用属性 app:srcCompat(5.0以上可以直接使用background或src)
代码里面使用无区别，直接setBackground即可。

2.Button
不支持app:srcCompat
直接使用

3.RadioButton
直接使用

4.textview的drawable
直接使用，5.0以下某些机型可能会崩溃的。
AppCompatTextView是没有对CompoundDrawable进行适配的，所以需要自己动手才能丰衣足食。简单原理是，判断系统版本如果小于5.0，就用ContextCompat.getDrawable获取到Drawable实例，再setCompoundDrawablesWithIntrinsicBounds。

二、Vector Drawable的使用

2.1 Vector Drawable静态使用

去阿里svg平台随便找张svg的图片，既可以通过svgtoandroid
也可以通过AS自带的插件将其转化为vector drawable，接着配置项目兼容环境，再将这个vector在资源xml中用android:src赋值给ImageView，最后的结果就是这样，无论怎样放大都不会失真。

这里写图片描述

2.2 Vector Drawable动态使用

除了帧、补间、属性动画以外，vector drawable也可以用来完成动画效果，还记得之前讲的path标签吗，这里面的属性都可以作为动画的变化条件，我们再展示一下：

android:name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色，如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框，如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率，取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率，取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围 
android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限

首先，获取到一张vector图片，比如这次使用的是一个对勾。我们给path标签附上了name属性，这是为了之后在动画中找到这条path。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="path_check"
        android:fillColor="#FF000000"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>

接着，用动画vector包装原来的vector图片，其创建方式和vector相似，只不过最外层的标签为animated-vector。我们还要为target标签赋值，name属性是前面命名的、vector中需要变化的地方，而animation自然就是属性动画了。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/vector_check"
    tools:targetApi="lollipop">
    <target
        android:name="path_check"
        android:animation="@anim/check_anim"/>
</animated-vector>

归根结底还是需要用到属性动画，我们通过xml的方式来完成它。注意要在res下创建anim文件夹，再将xml放入其中。这里变化的属性是path标签中trimPathEnd属性。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="trimPathEnd"
        android:valueFrom="0"
        android:valueTo="1"
        android:valueType="floatType"/>
</set>

最后，只要在代码中将Drawable转化为Animatable，并调用其start()方法开启动画即可。

<ImageView
        android:id="@+id/img"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:src="@drawable/anim_vector"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animatable animatable = (Animatable) imageView.getDrawable();
                animatable.start();
            }
        });

来看看效果图吧

这里写图片描述

三、交互式中国地图

先上图：

这里写图片描述

简单说一下思路

第一步下载含有中国地图的 SVG
这里附一个地图资源： https://www.amcharts.com/dl/javascript-maps/ ，这里面包含世界各个国家的SVG地图，各个省份地图

第二步将 SVG 资源转换成相应的 Android 代码

第三步利用 Xml 解析 SVG 的代码封装成 JavaBean 最重要的得到 Path
利用 Xml 解析，把中国地图的 Path 封装成一个个省的 JavaBean。

第四步重写 OnDraw 方法利用 Path 绘制中国地图

第五步重写 OnTouchEvent 方法，记录手指触摸位置，判断这个位置是否坐落在某个省份上

具体实现我们下一篇博客再讲吧，这里贴一下前面部分的代码地址：
点击下载源码