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

}