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

}