SVG动画_android svg viewportheight-CSDN博客

SVG简介

什么是SVG：

SVG矢量动画机制，Google在Android 5.x版本中增加了对SVG的支持
SVG特性：
- 可伸缩矢量图形
- 定义用于网络的矢量图形
- 使用XML格式定义图形
- 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- 符合万维网联盟标准
- 与注入DOM和XSL之类的W3C标准是一个整体
Bitmap和SVG图像的区别：
1. Bitmap是位图，由像素点组成，放大或者缩小就会失真，而SVG不会失真
2. SVG使用XML格式定义图形，修改容易
3. SVG由点来存储，由计算机根据点信息绘图，不会失真，无需根据分辨率及进行适配
4. SVG的占用空间比Bitmap小
5. SVG可以转化为Path路径，与Path动画相结合

具体使用：

标准的SVG语法中支持很多标签，rect, circle, line， polyline，ellipse, polygon， path等标签
Android通过一种简化的方式对SVG进行兼容即Path标签

vector标签与图像显示

将下面的代码放在drawable目录下，并使用控件展示：


<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="50"
    android:viewportWidth="100">
    <path
        android:name="bar"
        android:pathData="M50, 23, L100,25"
        android:strokeWidth="2"
        android:strokeColor="@android:color/darker_gray"/>
</vector>

属性解释：

首先我们使用width和height定义一个SVG画布，而viewportWidth和viewportHeight指的是将画布的宽和高分为多少个点，而path中的点的坐标都是以viewportWidth和viewportHeight的点数为坐标的，而不是dp值。
- width和height属性：表示SVG图形的具体大小
- viewportWidth与viewportHeight属性：表示SVG图形划分的比例

path标签和常用属性

path标签有如下几个常用属性：

android:name: 声明一个标记，类似于ID，便于对其作动画的时候找到该ID

android:pathData:对svg矢量图的描述

android:strokeWidth：画笔的宽度

android:fillColor：填充颜色

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

android:strokeColor：描边颜色

android:strokeWidth：描边宽度

android:strokeAlpha：描边透明度

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

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

android:strokeMiterLimit：设置斜角的上限，当strokeLineJoin的属性值为round和bevel的时候这个属性无效，当strokeLineJoin设置为miter的时候，锐角相交的时候斜面会变得相当长，苏哦一该属性的上限默认值为10

android:strokeLineJoin的效果对应于paint.setStrokeJoin(Paint.Join, join)函数， android:strokeLineCap对应于Paint.setStrokeCap(Paint.Cap, cap)函数

具体讲解某些函数

android:trimPathStart属性：

指定路径从哪里开始，取值0~1, 表示路径开始的位置的百分比，当取值为0表示从头开始，取值为1的时候表示不显示该路径

android:trimPathEnd属性：

指定路径的结束位置，取值为0~1, 表示路径结束位置的百分比，当取值为1时，路径正常结束，当取值为1时，路径正常结束，当取值为0时，路径不显示

android:trimPathOffset属性：

该属性指定结果路径的位移距离，取值为0~1,当取值为 0时，不进行位移，当取值为1时，位移整条路径的长度

android:pathData属性，在path标签中，主要通过pathData属性来指定SVG图像的显示内容，所以我们来看 pathData的属性：

M = moveTo(MX, Y)：将画笔移动到指定的坐标位置
L = lineTo(L X, Y)：画直线到指定的坐标位置
H = horizontal lineTo(H X)：画水平线到指定的X坐标的位置
V = vertical  lintTo(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()：关闭路径

eg: A指令画一条弧线，且弧线不闭合，A指令的各参数如下：

RX， RY指所欲椭圆的半轴大小
XROTATION指椭圆X轴和水平方向顺时针方向的夹角，即一个水平的椭圆绕着中心点顺时针旋转XROTATION角度
FLAG1只有两个值，1表示大角度弧度，0表示小角度弧度
FLAG2只有两个值。确定从起点到终点的方向，1表示顺时针，0表示逆时针
X, Y为终点坐标

注意：

坐标轴以（0, 0）为原点，x轴水平向右， y轴水平向下
所有指令大小写均可，大写表示绝对定位，小写表示相对定位，所参照的对象一个是全局坐标一个是局部坐标
指令和数字间的空格可以省略
同一指令出现多次可以只用一个

group标签:

path标签用于定义可绘图的路径，而group标签则用于定义一系列路径或者将path标签分组，主要应用于动画中，通过group标签可以将原本有一个path路径实现的内容分为多个path路径，每一个path指定一个特定的动画

group标签的使用十分的随意：

在这里插入图片描述

group标签的使用：

android:name：组的名字，用于与动画相关联
android:rotation：指定该组图像的旋转度数
android:pivotX：定义缩放和旋转该组时的X参考点，该值是相对于Vector的viewport值来确定的
android:pivotY：定义缩放和旋转该组时的Y参考点，该值是相对于Vector的viewport值来确定的
android:scaleX：指定该组X轴缩放大小
android:scaleY：指定该组Y轴缩放大小
android:translateX：指定该组沿着X轴平移的距离
android:translateY：指定该组沿着Y轴平移的距离

制作SVG图像：

设计软件：软件地址
Iconfont：阿里巴巴矢量图库将想要的矢量图打包成一个.ttf文件

引入SVG图像：

在线转换：传送门直接将图片拖入并直接拷贝出xml就可以
通过android studio引入：drawable右键new选择Vector asset

eg:

使用ImageView显示SVG图像

<ImageView    
android:id="@+id/svg_first"    
android:layout_width="wrap_content"    
android:layout_height="wrap_content"    
android:src="@drawable/rotation" 或者app:srcCompat="@drawable/svg_first" />
上述的两种使用方式基本没有差别，第二种主要是为了做兼容

在Button，RadioButton中使用
- Button并不能使用src或者srcCompat, 需要通过selector来使用

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
<item        
android:drawable="@drawable/svg_first"        
android:state_pressed="true" />    
<item 
android:drawable="@drawable/svg_first"/>
</selector>

<Button    
    android:id="@+id/btn_svg"    
    android:layout_width="100dp"    
    android:layout_height="100dp"    
    android:background="@drawable/selector_first"/>

动态Vector

首先声明一个Vector svg图像
然后在Animator文件下定义一个Animator文件
然后在drawable目录下创建一个animate-vector标签的文件

 <?xml version="1.0" encoding="utf-8"?>
 <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"    
    <!--指定Vector图像-->
    android:drawable="@drawable/svg_first">    
    <target       
        <!--通过target标签和动画相关联，target的name就是指定Vector中的path的name， 两者必须相同， target标签就是将path和动画进行绑定，可以有多个target标签-->
        android:name="bar"       
        <!--绑定动画-->
        android:animation="@animator/anim_trim_svg"/>
 </animated-vector>