Android动画（4） 矢量动画SVG

简介

Scalable Vector Graphics

用于网络的基于矢量的图形

放大，或改变尺寸的情况下质量不会有损失

XML定义

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,X2,Y2,ENDX,ENDY)： 三次贝赛曲线

S = smooth出入（SX2,Y2,ENDX,ENDY): 三次贝赛曲线

Q = quadratic Belizier 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（） 关闭路径

Android使用

静态动画

vector标识 drawable下vector.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="200dp"
android:width="200dp"
android:viewportHeight="100"
android:viewportWidth="100">   //200dp平分100份  则下面用50，则代表中心
<group>
<path
android:name="path1"
android:strokeColor="@android:color/holo_green_dark"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,80
L 50,80 80,80"/>
<path
android:name="path2"
android:strokeColor="@android:color/holo_green_dark"
android:strokeWidth="5"
android:strokeLineCap="round"
android:pathData="
M 20,20
L 50,20 80,20"/>

</group>

</vector>

然后是对静态动画的path1，和path2 相应的android name 写对应的animation.
anim下 anim_path1.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android = "http://schemas.android.com/apk/res/android"
android:duration="500"
android:propertyName="pathData"   //注意这里为pathData
android:valueFrom="
M 20,80
L 50,80 80,80"
android:valueTo="
M 20,80
L 50,50 80,80"
android:valueType="pathType"   //注意类型
android:interpolator="@android:anim/bounce_interpolator"/>

anim下 anim_path2.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android = "http://schemas.android.com/apk/res/android"
android:duration="500"
android:propertyName="pathData"
android:valueFrom="
M 20,20
L 50,20 80,20"
android:valueTo="
M 20,20
L 50,50 80,20"
android:valueType="pathType"
android:interpolator="@android:anim/bounce_interpolator"/>

使用animated-vector标签结合
drawable下anim_vector.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector">   //静态动画
<target
android:name="path1"     //path1 对应的动画
android:animation="@anim/anim_path1"/>
<target
android:name="path2"    //path2对应的动画
android:animation="@anim/anim_path2"/>

</animated-vector>

主activity布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.vectoranimation.MainActivity" >

<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/anim_vector"
/>

</RelativeLayout>

主activity使用
public class MainActivity extends Activity {

private ImageView imageView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = (ImageView) findViewById(R.id.image);
imageView.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
animate();
}
});
}

protected void animate() {
// TODO Auto-generated method stub
Drawable d=imageView.getDrawable();
if(d instanceof Animatable){

((Animatable)d).start();
}
}

}