android svg

先看几张效果图

若需要使用svg需要更新sdk至API 21。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center" >
    

    <ImageView 
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#ccc"
        android:src="@drawable/anim_vector1"/>

    
     <ImageView android:layout_marginTop="5dp"
        android:id="@+id/iv2"
        android:layout_width="260dp"
        android:layout_height="260dp"
        android:background="#ccc"
        android:src="@drawable/anim_vector2"/>
</LinearLayout>

Activity

package com.example.scroll;

import android.app.Activity;
import android.graphics.drawable.Animatable;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main_alyout);
		ImageView iv = (ImageView) findViewById(R.id.iv);
		Animatable drawable = (Animatable) (iv.getDrawable());
		drawable.start();

		ImageView iv2 = (ImageView) findViewById(R.id.iv2);

		((Animatable) iv2.getDrawable()).start();
	}

}

anim_vector1.xml

<?xml version="1.0" encoding="utf-8"?>

<!--使用 svg_drawable1文件，所以 target中name要和svg_drawable1中group名字相同-->
<animated-vector
     xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_drawable1"
     >
     <!-- animation指定动画 -->
     <target 
         android:name="test"
         android:animation="@animator/anim_path"
         />
    

    
</animated-vector>

svg_drawable1.xml

<?xml version="1.0" encoding="utf-8"?>

<!--

	 android:height  android:width表示svg图形的大小，

    android:viewportHeight="100"和 android:viewportWidth="100"的值的比要和  android:height 与 android:width的比相同。
    该例中设为100，则 （50，50）就表示中间位置
  -->
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <!-- 名字命名为 test，该名字要和 anim_vector1.xml中target 的 android:name=""一致 
    
    android:pivotX="50"
        android:pivotY="50"设置极点位置，该例设为50，即中间位置，旋转时可以看到图形绕中间旋转
    -->
    <group
        android:name="test"
        android:rotation="0"
        android:pivotX="50"
        android:pivotY="50"
        >
        <!-- android:pathData为绘制svg图形的指令，字母和数字间可以没有空格 -->
        <path  
            android:fillColor="@android:color/holo_blue_light"
            android:pathData="
            M25 50
            a 25,25 0 1,0 50,0"
            />
        
        
    </group>

</vector>

anim_path.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    
    android:duration="2000"
    android:propertyName="rotation"
    
    android:valueFrom="0"
    android:valueTo="360"
    android:repeatMode="reverse"
    android:repeatCount="-1"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    
    >
    

</objectAnimator>

第二个svg

anim_vector2.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
     xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_drawable2"
     >
     <target 
         android:name="path1"
         android:animation="@animator/anim_path_a"
         />
    
		<target 
         android:name="path2"
         android:animation="@animator/anim_path_b"
         />
    
     
    
</animated-vector>

svg_drawable2.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100"
    android:width="200dp" >

    <group>
        <path
            android:name="path1"
            android:pathData="
        	M20,80
        	L50,80 80,80
       		 "
            android:strokeColor="@android:color/holo_green_dark"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:pathData="
        	M20,20
       		L50,20 80,20
        	"
            android:strokeColor="@android:color/holo_green_dark"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>

</vector>

anim_path_a.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- 只需要指定开始结束图形就可以自动渐变。 如果指定propertyName为 pathData，则需要设置android:valueType="pathType"
-->
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    
    android:duration="1000"
    android:propertyName="pathData"
    
    android:valueFrom="
    M20,80
    L50,80 80,80
    "
    android:valueTo="
    M20,80
    L50,50 80,80
    "
    android:valueType="pathType"
    android:repeatMode="reverse"
    android:repeatCount="-1"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    
    >
    

</objectAnimator>

anim_path_b.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
    
    android:duration="1000"
    android:propertyName="pathData"
    
    android:valueFrom="
    M20,20
    L50,20 80,20
    "
    android:valueTo="
    M20,20
    L50,50 80,20
    "
    android:valueType="pathType"
    android:repeatMode="reverse"
    android:repeatCount="-1"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    
    >
    

</objectAnimator>

工程结构