矢量动画的介绍和使用
来源:互联网 发布:重生之网络崛起qq 编辑:程序博客网 时间:2024/06/05 12:44
什么是SVG(Scalable Vector Graphics)
SVG一种用于描述图像的标记语言。类似HTML。
SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。
标准制定开发历史
- 2001年9月4日,发布SVG 1.0。
- 2003年1月4日,发布SVG 1.1。
- 2003年1月14日,推出SVG移动子版本:SVG Tiny和SVG Basic。
- 2008年12月22日,发布SVG Tiny 1.2。
- 2011年8月16日,发布SVG 1.1(第2版),成为W3C目前推荐的标准。
- W3C目前仍正在研究制定SVG2,目前最新的草稿发布见此。
示例
下面是一个红色三角形的svg示例:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
效果图如下:
说明:
- svg矢量图的根节点就是svg,包含图片宽高和视口大小等信息。
- rect表示一个矩形。
- path(点击查看path元素介绍)表示一条路径,矢量图的形状就是通过path元素定义的,常见属性有:
- M (x y)+:在给定的(x,y)坐标开始path;
- L (x y)+:绘制一条直线从当前点到给定的(x,y)坐标;
- z:闭合当前path。
- C (x1 y1 x2 y2 x y)+:贝塞尔曲线;
点击查看svg元素索引列表
用SVG有什么好处
- svg是矢量图,缩放不会失真,位图缩放可能产生失真问题。
- 屏幕适配方便,一般我们为了适配不同分辨率可能会在ldpi、mdpi、hdpi、xhdpi等目录放对应分辨率的jpg/png图片,现在只需要一个xml文件,而且xml文件比jpg/png体积小,有利于缩减apk体积。
SVG相关工具
- 在线SVG编辑器:Method Draw,svgedit
- 离线SVG编辑器:inkscape,Adobe Illustrator
- svg转换Android VectorDrawable工具:
- svg2android,Gtihub
- SVG2VectorDrawable
在Android中使用SVG
创建矢量图片(VectorDrawable)
在Android中,负责矢量图加载,解析,绘制相关工作的类就是VectorDrawable,通过加载一个基于XML的VectorDrawable文件,在draw方法中把矢量图绘制到Canvas。在Android中矢量图一般用于图标和按钮。
1.这里使用Method Draw先编辑一个svg格式的矢量图,点击打开Method Draw,编辑完成后导出svg格式文件。
heart.svg
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2.把svg文件转换为Android的VectorDrawable文件。
手动转换
1. 在drawable目录下新建一个根节点为<vector>
的xml文件。
2. 把svg文件中的path数据拷贝到<vector>
,比如svg中path的d对应<vector>
中path的android:pathData
,stroke对应android:strokeColor
,stroke-width对应android:strokeWidth
等。使用工具转换
使用svg2android把svg文件转换为Android Drawable文件,把导出文件放到drawable目录下。
res/drawable/vector_drawable_heart.xml
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
注意:转换工具默认把画布的size作为矢量图的实际宽高,比如一个icon的svg设计时画布的宽高为480*480
,但实际需要的宽高为48*48
,所以记得修改<vector>
中的android:width
和android:height
为实际需要的宽高,不然就比较耗内存。
3.使用矢量图示例
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
目前这种做法只支持Android5.0+,如果想在Android5.0以下正常运行还要做如下兼容处理。
VectorDrawable向下兼容
1.在app的build.gradle文件中添加如下配置,启用support库。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2.ImageView改为使用support库的AppCompatImageView,使用app:srcCompat
替换android:src
。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
为矢量图片添加动画(AnimatedVectorDrawable)
AnimatedVectorDrawable可以让VectorDrawable加上动画效果。
VectorDrawable实现动画效果一般需要3个文件:
- VectorDrawable文件,根节点为
<vector>
的xml文件,矢量图。 - AnimatedVectorDrawable文件,根节点为
<animated-vector>
的xml文件,矢量图动画定义文件。 - 一个或多个属性动画文件。
1.VectorDrawable文件如下,通过android:name属性为group和path定义了一个唯一的名字,在AnimatedVectorDrawable文件中就是通过该名字实现group/path和相关动画的关联。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
效果图如下:
2.属性动画文件的编写,下面是cpu顶部排线的动画文件,还有类似的底部和左右排线的动画文件,共4个动画文件。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
3.AnimatedVectorDrawable文件如下,根节点<animated-vector>
,通过android:drawable
属性设置使用的矢量图文件。<target>
元素中的android:name
对应VectorDrawable文件中group/path的名称,android:animation
设置group/path使用的动画。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
4.最后,在AppCompatImageView中使用AnimatedVectorDrawable
- 在xml中使用AnimatedVectorDrawable:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
- 在代码中使用AnimatedVectorDrawable:
使用AnimatedVectorDrawableCompat.create方法加载AnimatedVectorDrawable文件得到AnimatedVectorDrawable对象。
AnimatedVectorDrawableCompat是support库中的类,作用是使AnimatedVectorDrawable兼容Android5.0以下系统。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
点击停止/播放动画
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
动画效果如下:
注意:目前AnimatedVectorDrawableCompat在Android5.0以下不支持pathData类型属性动画。如果需要用到pathData类型属性动画可以通过以下方法做兼容处理。
- 使用api标识符适配不同版本的系统,在drawable和drawable-v21目录下定义不同的实现。
- 代码中作兼容处理
- 1
- 2
- 3
- 1
- 2
- 3
- 使用vector-compat,VectorDrawable和AnimatedVectorDrawable的一个兼容库。
透明度,旋转,缩放属性动画没有效果?
这里给VectorDrawable的path添加一个透明度动画,发现没有效果,日志打印如下:
- 1
- 2
- 1
- 2
日志中可以看出没有找到相关的set方法,属性动画的实现原理其实是通过Java中的反射找到相关set方法去动态修改属性值实现的。
VectorDrawable(这里使用的是VectorDrawableCompat,兼容Android5.0以下版本)的group对应的类是VectorDrawableCompat$VGroup
,path对应的类是VectorDrawableCompat$VFullPath
。
通过查看VectorDrawableCompat$VFullPath
代码发现,VFullPath中透明度属性的名称为fillAlpha,于是把android:propertyName
值由alpha
改为fillAlpha
就可以了。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
示例代码工程地址:https://coding.net/u/linchaolong/p/AndroidSvgExample/git
相关开源项目
vector-compat
VectorDrawable和AnimatedVectorDrawable的一个兼容库,目前支持api 14+。
Github地址:https://github.com/wnafee/vector-compat
点击查看详细介绍
AndroidSVG
AndroidSVG是Android下的SVG解析、渲染库。目前几乎完全支持SVG 1.1的静态可视元素和SVG 1.2小部分规范(filters除外)。支持API 8+。
支持svg格式矢量图的ImageView
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- Github地址:https://github.com/BigBadaboom/androidsvg
- 官网:http://bigbadaboom.github.io/androidsvg/
android-pathview
android-pathview是绘制路径的动画库,路径可来自于svg或者标准Paths,使svg或path具有动画效果,并且可以改变路径的颜色、宽度。
Github地址:https://github.com/geftimov/android-pathview
点击查看详细介绍
vectalign
Android4.4以后AnimatedVectorDrawable可以让两个SVG图像无缝过渡(称为变形动画),但是这两个svg图像的path必须参数个数要相等,同时这些参数的类型要匹配(也就是说格式要对齐),如果不对齐会产生异常。简单的path可以手动修改对齐,但是复杂点的就比较难了。这个工具就是通过命令行的方式将任意两个svg资源转换成对齐的模式,而不会改变原始图像的外观。
Githu地址:https://github.com/bonnyfone/vectalign
点击查看详细介绍
素材分享
- 免费矢量icon分享网站,有十几万个矢量icon
- 8000个已分类好的扁平化图标(PNG/SVG/WEBFONT)
- 矢量动画的介绍和使用
- 矢量动画的简单使用
- SVG 矢量图和矢量动画介绍
- Android使用SVG矢量动画(二)
- .net矢量图和矢量动画控件
- 一组基于SVG矢量图库和jQuery/GSAP的精美图标动画
- 矢量图形和矢量图形创建软件的修改
- 矢量的点成(标量积)和矢量积
- Android中动画的介绍以及使用
- Android中动画的介绍以及使用
- 属性动画和帧动画的使用
- Android Animation 动画的使用方法和介绍
- Android Animation 动画的使用方法和介绍
- Android Animation 动画的使用方法和介绍
- Android Animation 动画的使用方法和介绍
- Android 动画的介绍和实现
- android矢量动画
- android SVG矢量动画
- Java之图形界面封装的日历类Date
- python-cookbook学习笔记二
- 数据库SQL优化大总结之 百万级数据库优化方案
- Python 抓取页面
- 网易面试题——赶去公司
- 矢量动画的介绍和使用
- export关键字的用法
- 【bzoj 2751】 [HAOI2012]容易题(easy)
- Eclipse调试进阶-结合Dubbo调试实例分析
- numpy模块笔记之meshgrid
- python3学习笔记:生成器generator
- 教你彻底学会动态规划——进阶篇
- 使用sqlite3 模块操作sqlite3数据库
- HTTPS