文档章节

VectorDrawable

carlos
 carlos
发布于 2015/10/01 09:52
字数 820
阅读 2060
收藏 3

Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。在xml文件中的标签是<vector>,下面是一个例子

<!-- res/drawable/heart.xml --><vector xmlns:android="http://schemas.android.com/apk/res/android"    <!-- intrinsic size of the drawable -->
    android:height="256dp"
    android:width="256dp"    <!-- size of the virtual canvas -->
    android:viewportWidth="32"
    android:viewportHeight="32">  <!-- draw a path -->
  <path android:fillColor="#8fff"      android:pathData="M20.5,9.5                        c-1.955,0,-3.83,1.268,-4.5,3                        c-0.67,-1.732,-2.547,-3,-4.5,-3                        C8.957,9.5,7,11.432,7,14                        c0,3.53,3.793,6.257,9,11.5                        c5.207,-5.242,9,-7.97,9,-11.5                        C25,11.432,23.043,9.5,20.5,9.5z" /></vector>

 

 12345678910111213141516171819

这样就定义好了一个静态的矢量图,可以像一般的图片资源使用,设置到imageView中会显示出一个心形。控制显示心形的就是上面path这个标签,一个path代表一个元素,绘制的内容是pathData下的一长串字符,里面是SVG绘制的一系列命令,提供moveTo、lineTo、close等操作,可以和Graphics 中的Path操作对应起来,具体可以查看SVG path Ref,后面会简要说明一下。 
VectorDrawable定义的是一张静态图,还有一个类AnimatedVectorDrawable,可以让矢量图有动画效果。一般需要三个步骤:

  • 定义VectorDrawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"     android:height="64dp"     android:width="64dp"     android:viewportHeight="600"     android:viewportWidth="600" >
     <group         android:name="rotationGroup"         android:pivotX="300.0"         android:pivotY="300.0"         android:rotation="45.0" >
         <path             android:name="v"             android:fillColor="#000000"             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
     </group>
 </vector>

 

 12345678910111213141516
  • 定义AnimatedVectorDrawable,给上面矢量图的元素添加动画

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"   android:drawable="@drawable/vectordrawable" >
     <target         android:name="rotationGroup"         android:animation="@anim/rotation" />
     <target         android:name="v"         android:animation="@anim/path_morph" />
 </animated-vector>

 

 123456789
  • 定义动画文件

<objectAnimator     android:duration="6000"     android:propertyName="rotation"     android:valueFrom="0"     android:valueTo="360" />

 

 12345
<set xmlns:android="http://schemas.android.com/apk/res/android">
     <objectAnimator         android:duration="3000"         android:propertyName="pathData"         android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"         android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"         android:valueType="pathType"/>
 </set>

 

 12345678

由于矢量图的特点,AnimatedVectorDawable可以实现一些很特别的效果,对VectorDrawable里的pathData做动画,可以从一个图形渐变到另一个图形,比如Material Design里的toolbar icon;对trimPathStart、trimPathEnd做动画,可以得到图形的绘制轨迹。

SVG Path Data

主要有以下一些命令

  • M: move to 移动绘制点

  • L:line to 直线

  • Z:close 闭合

  • C:cubic bezier 三次贝塞尔曲线

  • Q:quatratic bezier 二次贝塞尔曲线

  • A:ellipse 圆弧

每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写表示相对坐标。参数之间用空格或逗号隔开

命令详解:

  • M (x y) 移动到x,y

  • L (x y) 直线连到x,y,还有简化命令H(x) 水平连接、V(y)垂直连接

  • Z,没有参数,连接起点和终点

  • C(x1 y1 x2 y2 x y),控制点x1,y1 x2,y2,终点x,y

  • Q(x1 y1 x y),控制点x1,y1,终点x,y

  • A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) 
    rx ry 椭圆半径 
    x-axis-rotation x轴旋转角度 
    large-arc-flag 为0时表示取小弧度,1时取大弧度 
    sweep-flag 0取逆时针方向,1取顺时针方向 
    有个图解: 

应用

在github上看到一个VectorDrawable应用的例子,实现了一个动态效果的searchbar,原理就是对VectorDrawable trimPathStart这个属性做动画。最初的设计在这里,照着实现一下:

Reference

本文转载自:http://blog.csdn.net/xu_fu/article/details/44004841

carlos

carlos

粉丝 25
博文 85
码字总数 21928
作品 0
黄浦
程序员
私信 提问
Android SVG、Vector和VectorDrawable矢量图及动画

Vector图像,第三方Sharp库,阿里巴巴的SVG图。 阿里巴巴矢量图库(http://www.iconfont.cn/) Android矢量图(一)--VectorDrawable基础- https://www.jianshu.com/p/0972a0d290e9 android下一些...

desaco
2018/10/18
0
0
Android SVG矢量动画机制

导语 黑科技来了,Google在Android5.X中增加了对SVG矢量图形的支持,这对于创造新的高效率动画具有很深远的意义。 主要内容 < path >标签 SVG常见指令 SVG编辑器 Android中使用SVG SVG动画实...

一个有故事的程序员
2017/10/18
0
0
图片和图形之矢量绘制(Vector drawables)(3)

原文 概述 A VectorDrawable是一个矢量图形,在XML文件中定义为一组点,线和曲线及其相关的颜色信息。使用矢量绘图的主要优点是图像可伸缩性。它可以在不损失显示质量的情况下进行缩放,这意...

lichong951
2018/05/25
0
0
Android性能优化典范

Android性能优化典范 - 第6季 地址 这里是Android性能优化典范第6季的课程学习笔记,从被@知会到有连载更新,这篇学习笔记就一直被惦记着,现在学习记录分享一下,请多多指教包涵!这次一共才...

项勇
2018/01/02
0
0
Android 5.0+高级动画开发 矢量图动画 轨迹动画 路径变换

第1章 课程介绍 为了成就更多高逼格的人才,我专门整理了Android5.0以后主推的实现酷炫动画的新技术,教你掌握实现动画的高逼格技巧。课程中我会详细讲解每个动画效果实现的原理和所用的技术...

17087075817
2018/05/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部