Android中svg矢量图和动画的使用

本文主要是介绍Android中svg矢量图和动画的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

新手Android SVG矢量图动画进阶

Android中svg实现的svg动画效果(超简单,在Android中除svg路径动画外，svg已经兼容到3.0以下,源代码已上传github)

5c85d82099906

什么是SVG

svg概念

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

svg历史和优势

SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG工具和获取SVG资源

svg在线编辑器1
svg在线编辑器2
svg在线编辑预览工具
阿里巴巴的iconfont图标网站可以下载svg格式图片
各种设计工具也支持svg格式图片的导出

在html中定义一个简单的svg

代码

Android中如何使用SVG

在Android中通过Vector来定义svg,vector对svg语法进行了简化，主要通过path来画出图形轨迹详情参考

支持指令
- M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
- L = lineto(L X,Y) ：画直线到指定的坐标位置
- H = horizontal lineto(H X)：画水平线到指定的X坐标位置
- V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
- C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
- S = smooth curveto(S X2,Y2,ENDX,ENDY)
- Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
- T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
- A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
- Z = closepath()：关闭路径
使用原则
- 坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下
- 所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
- 指令和数据间的空格可以省略
- 同一指令出现多次可以只用一个

Android Studio简单使用svg

首先在drawable下创建一个资源文件,类型选择vector,通过path属性指定颜色和轨迹画出图形

 <!--viewportWidth指定当前组件比例-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="100dp"android:height="100dp"
android:viewportWidth="100.0"
android:viewportHeight="100.0">
//通过path设置颜色,画出图形路径,这里的name便于执行动画作用于它
<pathandroid:name="square"
android:fillColor="#913318"
android:pathData="M0,0 L100,00 L100,100 L0 ,100,z" /></vector>

5c85dd6b3f864

ImageView通过app:srcCompat属性设置vector资源,也可以做选择器，把定义的svg设置为背景给button

为vector定义渐变动画(使用svg当然不是为了实现这么简单的功能)

	   //在animator下定义动画资源,实现颜色值的变化,repeatMode设置动画重复执行
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"android:duration="1000"android:interpolator="@android:interpolator/overshoot"android:propertyName="fillColor"android:repeatMode="reverse"android:repeatCount="infinite"android:valueFrom="@android:color/holo_red_dark"android:valueTo="@android:color/darker_gray"android:valueType="intType">
</objectAnimator>

然后在drawable下定义粘合剂(关联vector资源和动画的资源文件)，类型为animated-vector

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:drawable="@drawable/bg_rec"tools:targetApi="lollipop">//指定动画和动画作用的元素<targetandroid:animation="@animator/anim_square"android:name="square"/>
</animated-vector>

然后在布局中把资源设置给ImageView

在activity中激活vector动画

public void anim(View v){ImageView imageView= (ImageView) v;Drawable drawable=imageView.getDrawable();if(drawable instanceof Animatable){((Animatable)drawable).start();}}