欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

程序员文章站 2022-04-23 19:17:29
《Android5.0+高级动画开发》讲的是如何借助VectorDrawable技术,贝赛尔曲线技术,PathMeasure技术实现酷炫动画。相比之前学习过的帧动画,补间动画,属性动画,它们有哪些值得我们学习的地方呢?Android为什么在5.0以后推出了VectorDrawable技术?徐大神为什 ......

 《Android5.0+高级动画开发》讲的是如何借助VectorDrawable技术,贝赛尔曲线技术,PathMeasure技术实现酷炫动画。相比之前学习过的帧动画,补间动画,属性动画,它们有哪些值得我们学习的地方呢?Android为什么在5.0以后推出了VectorDrawable技术?徐大神为什么要推荐和分享这些技术?废话到此结束,接下来记录下学习[初识矢量图SVG与VectorDrawable]这一小节的重点知识点。

知识点1:

网络上使用的图片一般有两种类型,一种是栅格图(.jpeg .gif .png),一种是矢量图(SVG),其是栅格图放大会失真,矢量图放大不会失真,如下图:

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

 

知识点2:

SVG -全称Scalable Vector Graphics,是一种W3C推荐的用来描述两维矢量图形的语言。目的是提供一种灵活而实用的图形格式,并在 XML 中表示出来。SVG 的特性集包括嵌套式转换、剪辑路径、羽化遮罩、光栅过滤器效果、模板对象,可扩展性等,支持动画、缩放视图、各种图形原语、分组、超链接、结构化元数据、CSS、DOM 扩展集,并可以轻易地嵌入到其他 XML 文档中。一般用于Web端。

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

rect标签:代表画一个矩形,circle标签:代表画一个图形,polyline标签:代表画一条折线,line标签:代表画一条直线

 

知识点3:

VectorDrawable是Android中的矢量图,只抽取了SVG中的Path标签来画所有图形,提高了矢量图在Android系统中的加载与解析效率。VectorDrawable常用语法:

 

  M=moveto(M X,Y):将画笔移动到指定坐标位置

  L = lineto(L X,Y):画直线到指定的坐标位置

 Z=closepath():关闭路径

 H=horizontal lineto(H X) :画水平线到指定的X 坐标位置

 V=vertical lineto(V Y):画垂直线到指定的Y坐标位置

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

 

知识点4:

矢量图SVG在线制作工具-SVG Editor(http://editor.method.ac)

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

 


SVG转VectorDrawable 在线工具(https://inloop.github.io/svg2android/)

 

Android5.0矢量图动画-[初识矢量图SVG与VectorDrawable]

 

 

AndroidStudio中也提供了转化工具,而且SVG之所以可以转化为VectorDrawable是因为SVG语法比较固定,所有SVG图形归根到底都是Path,而VectorDrawable正是提取了SVG中的Path。