Android 5.0 动画（二）-SVG

在学习之前，我们得先了解下什么是SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

以上内容来自w3c

那么SVG图是个是什么格式呢？有兴趣的小伙伴仔细看W3C把，我这里直接从网上下载张SVG图，我们以文本的形式打开看看。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g id="Imagenes">
</g>
<g id="Layer_2">
    <path d="M27.211,35.106c1.335-2.67,4.499-3.046,5.511-3.098l6.735-1.684c0.051-0.456,0.086-1.056,0.113-1.509 c0.151-2.577,0.322-5.498,2.536-6.604c0.317-0.158,0.643-0.278,0.975-0.357C41.965,20.517,39.985,18.323,38,17c-3-2-6,0-9-1 s-6-2-6-3c0,0-1,3,2,5c0,0-5,1-8-3c0,0-1,3,2,7c0,0-4,1-9,0c0,0,1,4,4,6c0,0-3,3-9,1c0,0,1,5,5,6c0,0-4,3-8,2 c0,0,2.224,5.415,11.112,3.708C13.112,40.708,12,44,5,44c0,0,5,5,13,1l-6,5c0,0,4,0,10-2c3.822-1.274,6.016-2.146,7.109-3.902 C27.202,42.524,25.114,39.3,27.211,35.106z M36,26c0,0,0,2-3,2s-4-5-4-5S34,23,36,26z"/>
    <path d="M55.693,24.884C52.232,24.884,48,27,48,27c-0.817-1.633-2.3-3.266-3.905-3.266c-0.088,0-0.177,0.021-0.265,0.031 C43.555,23.796,43.278,23.861,43,24c-2,1-1,7-2,8l-8,2c0,0-3,0-4,2c-1.428,2.855-0.218,4.914,0.844,6.032 C30.445,42.665,31,43,31,43s15-1,20-2s4-4,4-4s0,1-3,1s-5-1-5-1s-1,0,2-2c1.757-1.172,3.515-1.657,5.071-1.657 c1.1,0,2.101,0.243,2.929,0.657c2,1,2,4,2,4c3-4,3-9,0-12C58.182,25.182,56.992,24.884,55.693,24.884z"/>
</g>
</svg>

其中重要的就是标签了，这里就是藐视图片的绘制过程的。

标签用来定义路径。

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

上面的内容来自w3c。

接下来我们就看看如何在android中用这些东西把。
在drawable目录下建立XML文件，以标签开头，如下。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="300dp" android:height="300dp" android:viewportHeight="100" android:viewportWidth="100" >
    <path android:name="path_one" android:strokeColor="#bcbc1d" android:strokeWidth="1" android:pathData="M27.211,35.106c1.335-2.67,4.499-3.046,5.511-3.098l6.735-1.684c0.051-0.456,0.086-1.056,0.113-1.509 c0.151-2.577,0.322-5.498,2.536-6.604c0.317-0.158,0.643-0.278,0.975-0.357C41.965,20.517,39.985,18.323,38,17c-3-2-6,0-9-1 s-6-2-6-3c0,0-1,3,2,5c0,0-5,1-8-3c0,0-1,3,2,7c0,0-4,1-9,0c0,0,1,4,4,6c0,0-3,3-9,1c0,0,1,5,5,6c0,0-4,3-8,2 c0,0,2.224,5.415,11.112,3.708C13.112,40.708,12,44,5,44c0,0,5,5,13,1l-6,5c0,0,4,0,10-2c3.822-1.274,6.016-2.146,7.109-3.902 C27.202,42.524,25.114,39.3,27.211,35.106z M36,26c0,0,0,2-3,2s-4-5-4-5S34,23,36,26z">

    </path>
    <path android:name="path_two" android:strokeColor="#bcbc1d" android:strokeWidth="1" android:pathData="M55.693,24.884C52.232,24.884,48,27,48,27c-0.817-1.633-2.3-3.266-3.905-3.266c-0.088,0-0.177,0.021-0.265,0.031 C43.555,23.796,43.278,23.861,43,24c-2,1-1,7-2,8l-8,2c0,0-3,0-4,2c-1.428,2.855-0.218,4.914,0.844,6.032 C30.445,42.665,31,43,31,43s15-1,20-2s4-4,4-4s0,1-3,1s-5-1-5-1s-1,0,2-2c1.757-1.172,3.515-1.657,5.071-1.657 c1.1,0,2.101,0.243,2.929,0.657c2,1,2,4,2,4c3-4,3-9,0-12C58.182,25.182,56.992,24.884,55.693,24.884z">

    </path>

</vector>

下面对其中的一些属性做出解释
viewportHeight 在源文件下的values/attrs.xml文件下 有如下说明

<!-- The height of the canvas the drawing is on. -->
<attr name="viewportHeight" format="float"/>
就是画布的高度..

标签下的 pathData属性就是SVG的path了

上面的例子中我们用了2个path，也就是说我们在用的时候分2个path来画，接下来我们该怎么办呢？

在drawable下面建一个以animated-vector标签开头的xml文件来组合2个path

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vectordemo">
    <target  android:animation="@animator/path" android:name="path_one"/>
    <target  android:animation="@animator/path" android:name="path_two"/>
</animated-vector>

接下来在布局文件中引用

<ImageButton  android:id="@+id/svgimagebutton" android:layout_width="300dp" android:layout_height="300dp" android:src="@drawable/vectorlist"/>

如果你以为到这里就完了的话，那么你就太天真了，到这里这一步，确实能显示出来，但是却是直接显示最后的，并没有绘制的过程。
要想看出绘制的过程，还需要，在java文件中添加如下代码

imageSvg= (ImageButton) findViewById(R.id.svgimagebutton);
        AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.vectorlist);
        imageSvg.setImageDrawable(drawable);
        if (drawable!=null){
            drawable.start();
        }

到这里，SVG图就说完了。去试验下把。