SVG --- VectorDrawable

2019-08-20  本文已影响0人  Dream_Book

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有硬件加速,但平均下来,加载速度的提升弥补了绘制的速度缺陷。

上一篇下一篇

猜你喜欢

热点阅读