SVG --- VectorDrawable

SVG:Scalable Vector Graphics,可缩放的矢量图形

Vector只实现了SVG中的path标签,为了提高解析效率。

Vector常用语法:

M:moveo(M X,Y):将画笔移动到指定的坐标位置。

L:lineto(L X,Y):画直线到指定位置。

Z:closepath():关闭路径。

H:horizontal lineto(H,X):画水平直线到制定x坐标。

V:vertical lineto(V,Y):画垂直直线到制定y坐标。

SVG制作小工具:https://editor.method.ac/

如果不使用兼容器,SVG是无法在Android中直接使用的,so...转换

1.SVG转VectorDrawable小工具:http://inloop.github.io/svg2android/

2.AndroidStudio也提供转换工具:Vector Asset,在Drawable目录下右键菜单目录中New目录下有VectorAsset。

相比于.png图片,VectorDrawable体积缩小很客观。

android:viewportHeight="100"

android:viewportWidth="100"

是画布宽高,定义Path路径的时候就必须在这个画布大小里去绘制,超出画布范围的则无法显示。也可以说是将一个固定的矢量图均分为100等分,pathData则以其为基线坐标,而不是以固定大小为坐标,当vectorDrawable大小改变,只需用viewportHeight和viewportWidth做映射就可以,不需要改变pathData做改变。

VectorDrawable的「 兼容性 」

第一阶段:Android5.0上提出VectorDrawable,兼容minSDK>=21。

第二阶段:Gradle Plugin 1.5对minSDK<21版本兼容。对minSDK>=21的设备使用Vector;对minSDK<21的设备,会将Vector转换为PNG格式(在编译的时候自动完成),而且只能使用静态的VectorDrawable,兼容成本大,效果不明显。

第三阶段:AppCompat23.2增加了对VectorDrawable的全版本兼容。静态的VectorDrawable支持2.1以上的设备;动态的VectorDrawable支持3.0以上的设备。


动态VectorDrawable向下兼容:

1.pathMorphing:路径变换动画在Android-L以下版本是无法使用的。

2.pathInterpolation:路径插值器,在Android-L以下版本是无法自定义的,只能使用系统提供的。

动态VectorDrawable向上兼容:

1.pathMorphing:路径变换动画在Android-L以上需要代码配置。

环境配置:

使用VectorDrawable的一些配置
如果Gralde小于2.0

使用:

<ImageView                                                                                                                            android:id="@+id/imageView"                                                            android:layout_width="50dp"                                                                                              android:layout_height="50dp"                                                                                             android:layout_marginTop="8dp"                                  app:layout_constraintLeft_toLeftOf="parent"     app:layout_constraintRight_toRightOf="parent"     app:layout_constraintTop_toTopOf="parent"                  app:srcCompat="@drawable/ic_truck" />

But:

如果是Button这种带有属性的的控件,不能直接设置srcCompat去引用一个VectorDrawable(因为兼容所带来的牺牲)。并且如果Activity中有这样设置Button,还需要一下操作。

需要一个Selector
使用background去引用
如果是5.0一下的设备

使用VectorDrawable不仅仅是因为它体积小 --- 动态的VectorDrawable

animated-vector:配置动画粘合剂,将属性动画vector连接起来。

animated-vector

1.文件所在的位置。

2.所要操作的动画。

3.所操作动画的目标pathName.

4.所操作的pathName要执行的动画。

属性动画

propertyName:属性而已,其他都是一样的。

propertyName:表述属性动画的作用对象的属性的名称;

duration:表示动画的时长;

valueFrom:表示属性的起始值;

valueTo:表示属性的结束值;

startOffset:表示动画的延迟时间,当动画开始后,需要延迟多说毫秒才会真正播放此动画;

repeatCount:表示动画的重复次数;

repeatMode:表示动画的重复模式;

valueType:表示android:propertyName所指定的属性的类型,有intType和floatType两个可选项,分别表示属性的类型为整型和浮点型。另外,如果android:propertyName所指定的属性表示的是颜色,那么不需要指定android:valueType,系统会自动对颜色类型的属性做处理。

对于一个动

注意group

有些属性动画的属性并不存在于path标签中,但存在于group标签中(比如:translateY),可以通过group将path标签分组。变色动画,操作的目标就不是group而是path。

布局中的使用
代码中的调用
轨迹动画

VectorDrawable的使用场景:

png:三格图,可以借助GPU去渲染,渲染效率非常高。

vectorDrawable:体积非常小,缩放不会失真,但是只能通过cpu去解析运算,无法通过GPU去做渲染的加速。

图像复杂度----图像更新频率:

1.Bitmap的绘制效率并不一行会比Vector高,它们有一定的平衡点,当Vector比较简单时,其效率一定是Bitmap高,所以,为了保证Vector的高效率,Vector需要更加简单,PathData更加标准、精简,当Vector图像变得非常复杂就需要Bitmap来代替。

2.Vector适用于Icon、button、ImageView的图标等小的Icon,或者是需要的动画效果,由于Bitmap在GPU中有缓存功能,而Vector并没有,所以Vector图像不能做频繁的重绘。

3.Vector图像过于复杂时,不仅要注意绘制效率,初始化效率也是需要考虑的重要因素。

4.SVG加载速度快于PNG,但渲染速度慢于PNG,毕竟PNG有硬件加速,但平均下来,加载速度的提升弥补了绘制的速度缺陷。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容