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();        }    }}