move to (50,23)

line to(100,25)

而坐标并不是用width和height的坐标，而是viewportWidth和viewportHeight的坐标，(50,23)中50表示宽100份中的第50份，即中点，23为高度50份中的第23份，中点上面一点点。(100,25)也是这么理解，然后一条线划过去，就成为了上述效果图中那样的情况。

下面讲下path的常用属性：

  • android:name：ID

  • android:pathDate：对SVG矢量图的描述

  • android:strokeWidth：画笔宽度

  • android:fillColor：填充颜色

  • android:fillAlpha：填充颜色的透明度

  • android:strokeAlpha：描边的透明度

  • android:strokeLineJoin：用于指定折线拐角形状吗，取值有miter(结合处为锐角)、round(结合处为圆弧)、bevel(结合处为直线)

  • android:strokeMiterLimit：设置斜角的上限，因为两条线以锐角相交可能会产生很长的斜面。所以这个属性表示斜面长度和线条长度的比值，默认是10，意味着一个斜面的长度不能超过线条长度的10倍，只能和"strokeLineJoin=“miter”"连用。

  • android:strokeLineCap：画出线条的终点的形状（线帽），取值有butt（无线帽），round（圆线帽）、square（方形线帽）

  • android:trimPathStart：指定路径从哪里开始，表示路径开始的百分比。取值从0-1，当取值为0时，从起点开始取。（可以用该属性做进度）

  • android:trimPathEnd：指定路径结束的位置。0-1，当取值为1时，表示Path正常结束，如果取值是0，则一开始就结束了。

  • android:trimPathOffset：用于指定结果路径的位移距离，取值0-1，当取值为0时，不进行位置，为1时，位移到路径结束，即最开始的地方。

android:pathData：主要通过改属性来指定SVG的显示内容。而pathData属性除了M,L还有：

  • M = move to(MX,Y) 将画笔移动到相应的坐标位置

  • L = line to(LX,Y) 绘制直线到指定的位置

  • H = horizontal line to(H X)：绘制水平线到指定的X坐标位置

  • V = vertical line to(V,Y)：绘制垂直线到指定的Y坐标位置

  • C = curve to(C X1,Y1,X2,Y2,ENDX,ENDY)：三阶贝济埃曲线

  • S = smooth curve to(S X2,Y2,ENDX,ENDY)：三阶贝济埃曲线。很明显，这里的传值相比C指令少了X1、Y1，这是因为S指令会将上一条指令的终点作为这一条指令的起点

  • Q = quadratic Belzier curve to(Q X,Y,ENDX,ENDY)：二阶贝济埃曲线

  • T = smooth quadratic Belzier curve to(T ENDX,ENDY)：映射前面路径后的终点

  • A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线

  • Z = closepath()：关闭路径

其中A的参数意思为：

RX,RY 指所有椭圆的半轴大小

XROTATION ：指椭圆的X轴和水平方向顺时针方向的夹角，可以想象成一个水平的椭圆绕中心点顺时针旋转XROTATION角度。

FLAG1 只有两个值，1表示大角度弧度，0表示小角度弧度

FLAG2 只有两个值，1表示顺时针，2表示逆时针。

X、Y 为终点坐标

使用有以下要注意的地方：

  • 所有指令大小写均可，大写表示绝对定位，参照全局坐标，小写表示相对定位，参照父容器坐标

  • 统一指令出现多次可以只用一个

  • 坐标轴以（0,0）为中心，x轴水平向右，y轴垂直向下。

group标签

group标签下可以定义一系列的路径，或者将path标签分组。

在vector标签下可以同时有一个或多个group标签和path标签。

group标签的几个常用属性：

  1. android:name：组名

  2. android:rotation：指定该组图像的旋转度数

  3. android:pivotX：定义缩放和旋转时该组的X参考点。该值是相对于vector的viewport值来指定的

  4. android:pivotY：定义缩放和旋转该组时的Y参考点。该值是相对于vector的viewport值来指定的

  5. android:scaleX：x轴缩放大小

  6. android:scaleY：y轴缩放大小

  7. android:translateX：指定该组沿X轴平移的距离

  8. android:translateY：指定该组沿y轴平移的距离

如何制作SVG图像

  1. 如果有绘图基础就是用Illustrator或在线SVG工具制作SVG图像，或者通过SVG源文件下载网站下载后进行编辑。

  2. Iconfont

Iconfont是一种比较成熟的SVG解决方案，原理是把想要的矢量图打包成一个.ttf文件，在Android中应用这个ttf文件来加载和指定图标。

Android中引入SVG图像

在Android中是不支持SVG图像解析的，我们必须将SVG图像转化为vector标签描述。

这里有两个方法进行转化：

  • 在线转换

拿到SVG图像后，将其拖入在线转换网站http://inloop.github.io/svg2android/，就可以得到对应的vector标签。

  • 通过Android Studio引入

Android Studio2.0以上后就支持创建SVG图像。在 右键单击drawable - Vector Asset 之后，就可以生成Vector图像了。

动态Vector

前面简述了vector的标签的一些应用，而动态Vector实现的SVG效果才是SVG图像在Android应用中的精髓。

要实现Vector动画，首先需要vector图像和它所对应的的动画。

这里用之前做的那个SVG的一条线。

然后定义一个Animator文件：

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android=“http://schemas.android.com/apk/res/android”

android:propertyName=“trimPathStart”

android:valueFrom=“0”

android:valueTo=“1”

android:duration=“2000”>

这里指定的propertyName为path标签的“trimPathStart”属性，动画效果为从开始到结尾渐渐消失

做好一个vector图像和animator动画后，我们需要将这两个标签关联，Android 提供了关联的标签animated-vector，通过它就能关联动画和SVG了。

<?xml version="1.0" encoding="utf-8"?>

<animated-vector xmlns:android=“http://schemas.android.com/apk/res/android”

android:drawable="@drawable/svg_img1">

<target

android:name=“bar”

android:animation="@animator/anim_trim_start">

animated-vector中的drawable属性指的是svg文件， target标签有两个属性，name为svg中的某个path的name，是对应的，animation为使用的动画。

其中animated-vector下可以有多个target，因为如果vector标签中有多个path、group，这里就可以使用多个target了。

接下来在代码中声明动画：

AnimatedVectorDrawableCompat avdCompat = AnimatedVectorDrawableCompat.create(MainActivity.this, R.drawable.line_animated_vector);

iv = findViewById(R.id.iv);

iv.setImageDrawable(avdCompat);

((Animatable) iv.getDrawable()).start();

最后需要在build.gradle脚本中添加对vector兼容性的支持，因为Android APPT是默认是在Lolipop版本以上使用Vector，而在Lolipop版本以前使用Gradle生成相应的PNG图片，所以加了以下属性来关闭这个妥协:

defaultConfig {

vectorDrawables.useSupportLibrary = true

}

最后显示的效果如下：

接下来跟着书做一个复杂点的SVG动画。该动画是点击输入框后产生一个搜索的图标

首先准备一个SVG图像：

<?xml version="1.0" encoding="utf-8"?>

<vector xmlns:android=“http://schemas.android.com/apk/res/android”

android:width=“150dp”

android:height=“24dp”

android:viewportWidth=“150”

android:viewportHeight=“24”>

<path

android:name=“search”

android:pathData=“M141,17 A9,9 0 1,1 142,16 L149,23”

android:stro

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

keWidth=“2”

android:strokeColor="@android:color/darker_gray"/>

<path

android:name=“bar”

android:trimPathStart=“0”

android:pathData=“M0,23 L149,23”

android:strokeWidth=“1”

android:strokeColor="@android:color/darker_gray"/>

得到如下的图片：

动画的效果首先让下面横线渐渐消失，然后放大镜图标同时显现，所以这里使用了两个动画。

//下面横线消失的动画

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android=“http://schemas.android.com/apk/res/android”

android:duration=“500”

android:propertyName=“trimPathStart”

android:valueFrom=“0”

android:valueTo=“1”

android:valueType=“floatType”>

//这个是让放大镜从无到有的动画

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android=“http://schemas.android.com/apk/res/android”

android:duration=“500”

android:propertyName=“trimPathEnd”

android:valueFrom=“0”

android:valueTo=“1”

android:valueType=“floatType”>

创建好vector图像和animator后，要做的就是用animated-vector来关联它们，我们这里的animated-vector使用了两个target，分别来对应放大镜和下面的横线：

<?xml version="1.0" encoding="utf-8"?>

<target

android:animation="@animator/anim_search_trim_end"

android:name=“search”/>

<target

android:animation="@animator/anim_bar_trim_start"

android:name=“bar”/>

接下来就是在xml文件中使用这个svg图：

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

Android自定义控件开发入门与实战（7）SVG动画，android底层架构相关推荐

  1. Android自定义控件开发入门与实战（1）绘图基础

    今天从leader那里拿到了启舰大神写的<自定义控件开发入门与实战>这本书,据说看完了,至少写起自定义view也不会慌. 最重要的是多练,所以这本书基本设计到的我没有涉及过的控件开发(之前 ...

  2. Android自定义控件开发入门与实战（6）路径动画，android脚本开发工具

    前面几章所讲的内容其实都只是比较普通.简单的动画,这章开始学习较难.较为有深度.也比较可以实现更加炫酷效果的动画,通过PathMeasure和SVG动画来实现. PathMeasure实现路径动画 P ...

  3. Android自定义控件开发入门与实战（11）Xfermode，Android程序员如何有效提升学习效率

    mPaint = new Paint(); mPaint.setColor(Color.BLACK); mBitmap = BitmapFactory.decodeResource(getResour ...

  4. Android-史上最优雅的实现文件上传、下载及进度的监听，android自定义控件开发入门与实战

    注:如果需要对Http的返回值做解析,可在使用uploadProgress操作符时,传入一个解析器Parser 下载 //文件存储路径 String destPath = getExternalCac ...

  5. Android自定义控件开发入门与实战（15）SurfaceView，看完就能找到工作

    SurfaceHolder surfaceHolder = getHolder(); Canvas canvas1 = surfaceHolder.lockCanvas(); //绘图操作 - sur ...

  6. android开发入门与实践_我的新书《Android App开发入门与实战》已经出版

    前言 工作之余喜欢在CSDN平台上写一些技术文章,算下时间也有两三年了.写文章的目的一方面是自己对技术的总结,另一方面也是将平时遇到的问题和解决方案与大家分享,还有就是在这个平台上能和大家共同交流. ...

  7. 我的新书《Android App开发入门与实战》已经出版

    文章目录 1. 前言 2. 写书的目的 3. 书籍简介 4. 书籍目标读者群体 5. 书籍比较 6. 书籍特色 7. 书籍章节 8. 书籍封面 9. 购书地址 10. 本书案例及源码下载 1. 前言 ...

  8. 张利国,龚海平,王植萌.android移动开发入门与进阶,开题报告-基于Android的手机音乐播放器的设计与实现.doc...

    盐城师范学院 毕业设计开题报告 题 目: 基于android的手机音乐播放器 的设计与实现 姓 名: 二级学院: 信息工程学院 专 业: 软件工程 班 级: 12(1) 学 号: 指导教师: 职称: ...

  9. Android 自定义控件开发入门（一）

    那么怎样来创建一个新的控件呢? 这得看需求是怎样的了. 1.需要在原生控件的基本功能上进行扩展,这个时候你只需要继承并对控件进行扩展.通过重写它的事件,onDraw ,但是始终都保持都父类方法的调用. ...

最新文章

  1. GfK公司将IT设备移至Equinix公司在法兰克福的数据中心
  2. 浅谈 Python 的 with 语句
  3. mysql数据太大，如何导入_MySQL导入文件过大怎么办
  4. Web前端3.0时代,“程序猿”如何“渡劫升仙”
  5. 事务没提交的数据查的出来吗?_“金三银四”面试官：说说事务的ACID，什么是脏读、幻读？...
  6. 专家：人工智能开始对现实世界产生重大影响​​
  7. 我最喜欢的模板jade（pug）学习和使用
  8. activitimq集群搭建_Spring-activiti
  9. Kotlin 丢失了一些 JRE 类
  10. MongoDB aop 日志
  11. 计算机仿真技术在物流行业的应用,【计算机仿真论文】计算机仿真技术在物流中的应用(共3678字)...
  12. jq将php时间戳转化日期格式,JQuery将时间戳转换为时间
  13. excel 错位插入_Excel中图表插件导入错位的操作方法
  14. springboot实战—BMI体脂计算器-服务器端
  15. 手把手教你ARC——iOS/Mac开发ARC入…
  16. Java写的第一个小游戏(续)
  17. 现代交通灯的设计C语言编程,交通灯设计_优秀论文.doc
  18. Angular 2.0 文本拖拽
  19. 蓝宝石RX590GME 8G D5白金版黑苹果免驱成功
  20. android开机动画制作与播放原理简介

热门文章

  1. win10删除第三方增加的“设备和驱动器”
  2. 结构化数据和半结构化数据和非结构化数据
  3. 【App自动化测试】（四）Capability配置参数说明
  4. python图片文字合成视频_利用Python将多张图片合成视频的实现
  5. 【转】MIT牛人解说数学体系
  6. 4个顶级CAD制图软件，对照职业入手哦~
  7. Android面试必过——Android常见的问题
  8. c语言字节类型(bytes),Python bytes类型及用法
  9. OSI七层模型功能及相关设备
  10. 一次性删除PPT所有动画