前言
SVG图像是Android 5.0新特性,全称是Scalable Vector Graphics,叫可缩放矢量图形。它和位图(Bitmap)相对,SVG不会像位图一样因为缩放而让图片质量下降。下面这个图片展示了SVG和位图的区别,左边的位图在放大后出现了锯齿,而右边的SVG任然清晰。
SVG 的优势在于:
- 1.SVG 可被非常多的工具读取和修改(比如记事本),由于使用xml格式定义,所以可以直接被当作文本文件打开,看里面的数据;
- 2.SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强,SVG 图就相当于保存了关键的数据点,比如要显示一个圆,需要知道圆心和半径,那么SVG 只保存圆心坐标和半径数据,而平常我们用的位图都是以像素点的形式根据图片大小保存对应个数的像素点,因而SVG尺寸更小;
- 3.SVG 是可伸缩的,平常使用的位图拉伸会发虚,压缩会变形,而SVG格式图片保存数据进行运算展示,不管多大多少,可以不失真显示;
- 4.SVG 图像可在任何的分辨率下被高质量地打印;
- 5.SVG 可在图像质量不下降的情况下被放大;
- 6.SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图);
- 7.SVG 可以与 Java 技术一起运行;
- 8.SVG 是开放的标准;
- 9.SVG 文件是纯粹的 XML;
- 节约空间,使用方便;
如何在Android中使用?
1.把普通SVG图片转成Android可用格式:
有两种方法,手动改一下原始SVG的格式,或者用一个自动转换的工具(Android SVG to VectorDrawable)
下面展示一下,这个图像的SVG文件内容t
path是画出这个矢量图所需的笔画路径,这里就是移植到android所需要的关键部分。下面来看转换成android能用SVG图内容,这里我将重点讲解
sharp_rect.xml
注意到和普通SVG图内容不同地方在与viewBox那变成了viewportWidth,viewportHeight,viewport就相当于画这个SVG的画布大小。width和height是规定这个SVG图像最终的显示大小的,一般用dp表示。第二个不同是有一个普通SVG里的fill到android里要变成fillColor,这里就是SVG图像填充的颜色。第三点不同是,普通SVG的path的数据是d开头的标签,在android里要写成pathData。综上所述,只要把viewBox的大小改成viewport的大小,把填充颜色的fill改成fillColor,把Path中的d,改成pathData就行了。
还有最后一个问题pathData中的那些奇怪的东西是啥?数字是在viewport中的坐标点,M代表move to(把画笔移动到),L是Line(划线),Z是封闭path.(更多参考)
我们可以通过上面的变动手动把普通SVG转成android用的VectorDrawable,或者我们可以用这个网站自动完成转换 http://inloop.github.io/svg2android/
2.显示
这个SVG就直接就是Drawable直接用就好:
使用示例
效果图:
要实现这个布局很简单,用FrameLayout加一个ImageView并设置一个图片,再在FrameLayout上放一个RelativeLayout,背景用
怎么让它动起来呢?其实很简单,只要修改SVG图中的pathData就行,也就是从梯形变成一个长方形。原来的pathData的坐标和要变化的新坐标如图所示,
SVG文件内容:sharp_rect.xml
注意,我们把path加了一个name=”sharp_rect”,这是做动画效果是要指定这部分,所以需要给个独一无二的name作为id
下面做animate-vector drawable:
在animated-vector里填入android:drawable=”@drawable/sharp_rect”,这是指定要产生动画的SVG。target里是需要动画的对象,这里我们的对象就是前面那个叫sharp_rect的梯形,所以name里填上它,然后animation填的是对应的动画文件。
动画用的是ObjectAnimator做的,内容如下:
|
|
值得注意的是,我们要从梯形变成矩形,就是对pathData进行修改,也就是propertyName要填入pathData,valueType是pathType,valueFrom是原来的路径(也就是梯形的路径),最终变成的效果是valueTo(矩形的路径)。这里有个要注意的地方,如果要进行path的变换,里面的点数必须要一样!
Ok了大功告成,最后只要把ImageView的src改成animate_rect就行了,并设置触发函数就行了
|
|
注意,上面我这种方法不是Android SVG推荐的用法,SVG动画尺寸应该尽可能的小,和简单,因为每次动画都会先把这些path先计算绘成Bitmap,然后上传texture到GPU,如果SVG太大意味着生成更大的Bitmap,占更多内存,消耗更多时间.Google的推荐是把SVG用于图标(icon)和按钮(Button),只有需要的时候才修改Vector的属性(比如alpha,width,height),因为如果SVG不用于动画,android会把这个图生成一个Cache来节省时间,如果SVG动画这个Cache就没有用了。如果要用SVG动画,请确保它“短小精悍”(Short and sweet)。
下面还有一些SVG动画的例子: