Android 5.0 动画(二)-SVG

来源:互联网 时间:1970-01-01

在学习之前,我们得先了解下什么是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 = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Belzier curveT = smooth quadratic Belzier curvetoA = elliptical ArcZ = 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 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图就说完了。去试验下把。


相关阅读:
Top