《Android群英传》—读书笔记6

标签： android中级读书笔记

Android 5.X SVG矢量动画机制

SVG：课可伸缩矢量图形；使用XML格式定义图形；图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG相对于Bitmap的最大优势就是放大不会失真。而且Bitmap需要为不同的分辨率设置多套图标，而矢量图不需要
7.6.1 < path>标签
使用< path>标签创建SVG,就像使用指令的方式来控制一只画笔，< path>标签支持的指令有以下几种
M =moveto(M X,Y):将画笔移动到指定的位置，但未发生绘制
L =lineto(L X,Y):画直线到指定的坐标位置
H =horizontal lineto(H X)
V =vertical lineto(V 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():关闭路径
使用上面的指令注意：

1坐标以(0,0)位中心，X轴水平向右，Y轴水平向下
2所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
3指令和数据之间的空格可以省略
4同一指令出现多次可以只用一个

SVG常用指令
L
M
A RX,RY指所在椭圆的半轴大小；XROTATION指椭圆的X轴与水平方向顺时针方向夹角；FLAG1只有两个值，1表示大角度弧线，0为小角度弧线；FLAG2只有两个值，确定从起点至终点的方式，1为顺时针，0为逆时针；X,Y轴为终点坐标

7.6.3 SVG编辑器
可以用SVG编辑器来简化SVG复杂而固定的参数写法
比如Inkspace就是一款优秀的离线编辑器

7.6.4 Android中使用SVG

Android 5.X新增了两个API来帮助支持SVG
VectorDrawable
AnimatedVectorDrawable
VetorDrawable可以创建基于XML的SVG图形，并结合AnimatedVectorDrawable来实现动画效果

VectorDrawable

在XML中创建的静态SVG图形最小单位是 path,Group可以将不同的path进行组合

1：首先通过 < vector>标签来申明对SVG的使用,其中width,heght表示该SVG图形的具体大小，erviewportWidth,viewportHeight表示SVG图形划分的比例，因此width，height的比例必须与viewportWidth,viewportHeight的比例一致，否则图形就会发生压缩，形变

2:然后给< vector>标签增加显示path ,其中pathData就是绘制SVG图形使用的指令

示例代码如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="100"
android:viewportWidth="100">
<groupandroid:name="test"android:rotation="0"><pathandroid:pathData="M 25 50a 25,25 0 1,0 50,0"android:strokeColor="@android:color/holo_blue_light"android:strokeWidth="2" />
</group>
< /vector>

AnimatedVectorDrawable

AnimatedVectorDrawable就是给VectorDrawable提供动画效果，通过AnimatedVectorDrawable来连接静态的VectorDrawable和动态的objectAnimator;

1:首先在XML文件中通过< animated-vector>标签声明对AnimatedVectorDrawable的使用，并指定其作用的path或者group

2:然后通过target标签指定name和animation属性，注意name属性必须与VectorDrawable中需要作用的name属性保持名称一致，这样系统才能找到对应的实现动画元素；在VectorDrawable的< group>和< path>标签中添加的rotation ，fillColor,pathData等属性，就可以在objectAnimator中通过指定android:propertyName=”XXXX”来选择控制哪一种属性。（注意：若指定的属性为pathData,那么需要添加一个属性—android:valueType=”pathType”来告诉系统进行pathData变换）

3：然后就可以将一个AnimatedVectorDrawable XML文件设置给ImageView作为背景显示
在程序中，只要使用（（Animatable）imageView.getDrawable()）.start()；就可以开始SVG动画

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector">
<targetandroid:name="test"android:animation="@anim/anim_path1" />
< /animated-vector>

SVG动画实例

线图动画

两个objectAniamtor（这里同时有两个动画）

#anim_path1.xml:< objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:interpolator="@android:anim/bounce_interpolator"
android:propertyName="pathData"
android:valueFrom="M 20,80L 50,80 80,80"
android:valueTo="M 20,80L 50,50 80,80"
android:valueType="pathType" />#anim_path2.xml:<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:interpolator="@android:anim/bounce_interpolator"
android:propertyName="pathData"
android:valueFrom="M 20,20L 50,20 80,20"
android:valueTo="M 20,20L 50,50 80,20"
android:valueType="pathType" />

AnimatedVectorDrawable: 即trick_anim.xml

< animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/trick">
<targetandroid:name="path1"android:animation="@anim/anim_path1" />
<targetandroid:name="path2"android:animation="@anim/anim_path2" />< /animated-vector>

VectorDrawable: 即trick.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="100"
android:viewportWidth="100">
<group><pathandroid:name="path1"android:pathData="M 20,80L 50,80 80,80"android:strokeColor="@android:color/holo_green_dark"android:strokeLineCap="round"android:strokeWidth="5" />< pathandroid:name="path2"android:pathData="M 20,20L 50,20 80,20"android:strokeColor="@android:color/holo_green_dark"android:strokeLineCap="round"android:strokeWidth="5" />
< /group>
< /vector>

###轨迹动画
如果将propertyName指定为trimPathStart，则可以用这个属性来控制一个SVG Path的显示比例，例如一个圆形的SVG,使用trimPathStart动画，可以显现相互绘制圆的轨迹，就像慢慢画一个圆一样

#objectAnimator: <?xml version="1.0" encoding="utf-8"?>
<objectAnimator         xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:propertyName="trimPathStart"
android:valueFrom="0"
android:valueTo="1"
android:valueType="floatType" />#vector:<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="160dp"
android:height="30dp"
android:viewportHeight="30"
android:viewportWidth="160">
<pathandroid:name="search"android:pathData="M141,17A9,9 0 1,1 142,16L149,23"android:strokeAlpha="0.8"android:strokeColor="#ff3570be"android:strokeLineCap="round"android:strokeWidth="2" />
<pathandroid:name="bar"android:pathData="M0,23 L149,23"android:strokeAlpha="0.8"android:strokeColor="#ff3570be"android:strokeLineCap="square"android:strokeWidth="2" />
< /vector>#animated-vector:<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/searchbar"><targetandroid:name="search"android:animation="@anim/anim_searchbar" />< /animated-vector>