专栏名称: 郭霖
Android技术分享平台,每天都有优质技术文章推送。你还可以向公众号投稿,将自己总结的技术心得分享给大家。
目录
相关文章推荐
开发者全社区  ·  张局,我阿里P7,说起来跟你平级 ·  18 小时前  
开发者全社区  ·  刘亦菲 ·  21 小时前  
开发者全社区  ·  九个月前对DeepSeek的预测 ·  昨天  
开发者全社区  ·  县城「婆罗门」的威力 ·  昨天  
开发者全社区  ·  H航空姐的旗袍 ·  2 天前  
51好读  ›  专栏  ›  郭霖

Android SVG使用之AnimatedVectorDrawable

郭霖  · 公众号  · android  · 2017-06-13 08:00

正文

今日科技快讯

近日有统计机构在北京公布:2016届中国大学毕业生在毕业半年后的就业率为91.6%,这些毕业生平均月收入达到3988元。本科专业中,列在“高薪榜”前五位的专业分别是信息安全(5906元),软件工程(5869元),网络工程(5600元),微电子学(5503元)和计算机科学与技术(5452元)。

作者简介

本篇来自 Nemo 的投稿,详细地介绍了SVG的属性以及使用方式,感兴趣的朋友可以自己试一试。另外点击最后 阅读原文 可查看一些SVG相关资料的链接。

Nemo 的博客地址:

http://blog.csdn.net/nemo__

概述

SVG 可缩放矢量图形 (Scalable Vector Graphics),是使用XML来描述二维图形和绘图程序的语言,其定义遵循W3C标准。

在2003年1月,SVG 1.1被确立为W3C标准。使用 SVG 的优势在于:

  • SVG 可被非常多的工具读取和修改(比如记事本)

  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强

  • SVG 是可伸缩的

  • SVG 图像可在任何的分辨率下被高质量地打印

  • SVG 可在图像质量不下降的情况下被放大

  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

  • SVG 可以与 Java 技术一起运行

  • SVG 是开放的标准

  • SVG 文件是纯粹的 XML

下面的例子是一个简单的SVG文件的例子。SVG文件必须使用.svg后缀来保存:

HTML页面中使用SVG

SVG 文件可通过以下标签嵌入 HTML 文档: 或者

  • 使用 标签

标签被所有主流的浏览器支持,并允许使用脚本。当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法!然而,如果需要创建合法的 XHTML,就不能使用 。任何 HTML 规范中都没有 标签。

  • 使用 标签

标签是HTML 4的标准标签,被所有较新的浏览器支持。它的缺点是不允许使用脚本。假如您安装了最新版本的Adobe SVG Viewer,那么当使用 标签时SVG文件无法工作(至少不能在 IE 中工作)!

  • 使用

SVG

SVG的 元素用于定义一些复杂的图形,其定义在

W3 SVG Path

https://www.w3.org/TR/SVG11/paths.html#PathData

可用的命令如下:

以上所有命令均允许小写字母。 大写的字母 是基于原点的坐标系(偏移量),即绝对位置; 小写字母 是基于当前点坐标系(偏移量),即相对位置。

所有绘制工作都是在 元素中通过 d属性 来完成的。

(1) 坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下

(2) 命令与参数间的空格可以省略

M 250 150 M250 150

(3) 参数间可以使用空格或逗号隔开

M 250,150 M250,150

(4) 同一指令出现多次可以只用一个

M300,70 l 0,-70 70,70 0,0 -70,70z

(5) 命令大写字母基于坐标系原点,小写字母基于当前位置

假如虚拟画笔开始绘制的位置是(50,50),如果使用的是L100,100指令,那么就是从(50,50)位置开始绘制直线,绘制到(100,100)的位置。如果是l100,100指令,那么直线将从(50,50)位置开始绘制,绘制到(50+100,50+100)的位置。

(6) 闭合路径是指从最后一个绘制点连线到开始点,这个命令是Z(或z,这里大小写没有区别)

SVG Stroke属性

SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:

  • stroke 定义一条线,文本或元素轮廓颜色

  • stroke-width 定义了一条线,文本或元素轮廓厚度

  • stroke-linecap 定义不同类型的开放路径的终结,对接(butt)、圆形(round)和方形(square);

  • stroke-linejoin 控制两条线段之间的衔接,三个值:尖角(miter)、圆角(round)和斜角(bevel);

  • stroke-miterlimit miter-length 和 stroke-width 之间的比率做了限制,它的比值范围应大于或等于1。当比值不在这个范围的时候, stroke 就会被转换成斜角(bevel)。当 strokeLineJoin 设置为 “miter” 的时候,绘制两条线段以锐角相交的时候,所得的斜面可能相当长。当斜面太长,就会变得不协调。strokeMiterLimit属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是10,意味着一个斜面的长度不应该超过线条宽度的10倍。如果斜面达到这个长度,它就变成斜角了。当strokeLineJoin为“round”或“bevel”的时候,这个属性无效。

  • stroke-dasharray 创建虚线

  • stroke-dashoffset 设置需要图案延迟绘制的距离

  • stroke-opacity 线条,文本或元素轮廓透明度;

可能的取值如下:

以下为 stroke属性 的范例 stroke.avg,可以较好地理解各项含义:

标签A指令

标签 d属性 中,A指令 可用于画一段椭圆孤。

A指令格式

elliptical Arc (A RX,RY,XROTATION,large-arc-flag,sweep-flag,X,Y)

  • RX,RY 所在椭圆水平方向上的半径,垂直方向上的半径;RX 和 RY 设置为相同的值,将得到一个圆形的弧线

  • XROTATION 椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。

  • large-arc-flag,1表示大角度弧线,0为小角度弧线。

  • sweep-flag ,确定从起点至终点的方向,1为顺时针,0为逆时针

  • X,Y 为终点坐标

A指令图形详解,可以把arc.svg保存到本地,在浏览器中查看:

效果如下:

标签画贝塞尔曲线

标签d属性中,绘制贝塞尔曲线的命令包括:

  • Q 二次贝赛尔曲线 x1,y1 x,y

  • T 平滑二次贝塞尔曲线 x,y

  • C 曲线(curveto) x1,y1 x2,y2 x,y

  • S 平滑曲线 x2,y2 x,y

(1) Q 二次贝塞尔曲线

Q指令格式:M x0,y0 Q x1,y1 x2,y2

通过M定义(x0,y0)为起点,用Q定义(x1,y1)为控制点,(x2,y2)为终点,构成一条二次贝塞尔曲线。 Q方法非常简单直观。

效果如下:

(2) T 二次贝塞尔曲线平滑延伸

T指令格式:M x0,y0 Q x1,y1 x2,y2 T x4,y4

T命令是二次被赛尔曲线的平滑延伸命令,用Q定义了一段二次贝塞尔曲线后面,紧接着一个T命令,只需定义终点,就可以自动延伸出一条平滑的曲线。在这段曲线中,(x3,y3)没有手工定义,这里使用的T方法,只定义一个终点,起点是上一段曲线的终点,控制点则是上一段曲线的控制点的对称点(相对于上一段曲线的终点)。

T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。

(3) C 三次贝塞尔曲线

C指令格式:M x0,y0 C x1,y1 x2,y2 x3,y3

C方法定义的是三次贝塞尔曲线,只是多了一个控制点。

(4) S 三次贝塞尔曲线平滑延伸

S指令格式:M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6

三次贝塞尔也有一个平滑延伸的命令,需要定义一个控制点和一个终点,命令会再自动生成一个控制点x4,y4,从而形成一条延伸出来的三次贝赛尔曲线。

S命令前面必须是一个C命令,或者是另一个S命令,才能达到这种效果。如果单独使用S命令,则会变成画二次贝塞尔曲线效果。

Android SVG动画

AnimatedVectorDrawable类 使用 ObjectAnimator 和 AnimatorSet 来促使 VectorDrawable 属性渐变,来生成动画效果。

通常可以在3个XML文件中定义添加动画的矢量图片:

  • 在res/drawable/中拥有元素的矢量图片;

  • 在res/drawable/中拥有元素且已添加动画的矢量图片;

  • 在res/anim/中拥有元素的一个或多个对象动画;

添加动画的矢量图片可为 以及 元素的属性添加动画。 元素定义路径集或子组,而 元素则定义将绘制的路径。

完成一个 AnimatedVectorDrawable 通常需要定义三种不同类型文件:

(1). android.graphics.drawable.VectorDrawable 对应的XML文件,它以 为根。我们可能让 path 或 group 的属性进行动画,因此需要对进行动画的 path 或 group 命名。

(2). android.graphics.drawable.AnimatedVectorDrawable 对应的XML文件,它以 为根。这里定义需动画的 path 或 group 的 的animation属性指定为一般的 ObjectAnimator 或 AnimatorSet 对应的XML。

(3). android.graphics.drawable.Animator对应的XML文件,它以 等为根,对应 AnimatorSet 和 ObjectAnimator。

VectorDrawable

VectorDrawable一般是以 为根标签定义的XML文件, 元素都有各自可以播放动画的属性,查阅 SDK/docs/reference/android/graphics/drawable/VectorDrawable.html 你会找到每种元素到底有那些属性,以便针对这些属性播放特定的动画。比如 trimPathStart 和 trimPathEnd 能够让已画的path以百分比的形式渐变出现。

定义这个矢量图

  • android:name 矢量图的名字

  • android:width 矢量图的内部(intrinsic)宽度,支持所有Android系统支持的尺寸,通常使用dp

  • android:height 矢量图的内部(intrinsic)高度

  • android:viewportWidth 矢量图视图的宽度,视图就是矢量图path路径数据所绘制的虚拟画布

  • android:viewportHeight 矢量图视图的高度

  • android:tint 矢量图的tint颜色。默认是没有tint颜色的

  • android:tintMode 矢量图tint颜色的Porter-Duff混合模式,默认值为src_in。(src_in,src_over,src_atop,add,screen,multiply)

  • android:autoMirrored 设置当系统为RTL(right-to-left)布局的时候,是否自动镜像该图片。比如阿拉伯语。

  • android:alpha 该图片的透明度属性

设置路径做动画的关键属性的

  • android:name 定义group的名字

  • android:rotation 定义该group的路径旋转多少度

  • android:pivotX 定义缩放和旋转该group时候的X参考点。该值相对于vector的viewport值来指定的。

  • android:pivotY 定义缩放和旋转该 group 时候的Y参考点。该值相对于vector的viewport值来指定的。







请到「今天看啥」查看全文


推荐文章
开发者全社区  ·  张局,我阿里P7,说起来跟你平级
18 小时前
开发者全社区  ·  刘亦菲
21 小时前
开发者全社区  ·  九个月前对DeepSeek的预测
昨天
开发者全社区  ·  县城「婆罗门」的威力
昨天
开发者全社区  ·  H航空姐的旗袍
2 天前
齐俊杰看财经  ·  P2P理财投资的三个终极问题
7 年前
首席经济学家论坛  ·  徐高:利率是如何决定的?
7 年前