Android - VectorDrawable & AnimatedVectorDrawable

一、概述

Android 5.0支持了矢量图,采用SVG的方式

二、使用总概

VectorDrawable

AnimatedVectorDrawable

1.VectorDrawable

res/drawable/heart.xml
1
2
3
4
5
6
7
8
9
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="256dp"
android:width="256dp"
android:viewportWidth="32"
android:viewportHeight="32">
<path android:fillColor="#8fff"
android:pathData="M20.5,9.5 c-1.955,0,-3.83,1.268,-4.5,3 c-0.67,-1.732,-2.547,-3,-4.5,-3 C8.957,9.5,7,11.432,7,14 c0,3.53,3.793,6.257,9,11.5 c5.207,-5.242,9,-7.97,9,-11.5 C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

2.AnimatedVectorDrawable

res/drawable/vectordrawable.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
res/drawable/animvectordrawable.xml
1
2
3
4
5
6
7
8
9
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@anim/rotation" />
<target
android:name="v"
android:animation="@anim/path_morph" />
</animated-vector>
res/anim/rotation.xml
1
2
3
4
5
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
res/anim/path_morph.xml
1
2
3
4
5
6
7
8
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
</set>
layout.xml
1
2
3
4
5
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/animvectordrawable" />
Activity.java
1
2
3
4
ImageView imageView = (ImageView) findViewById(R.id.image);
if (imageView.getDrawable() instanceof AnimatedVectorDrawable) {
((AnimatedVectorDrawable) imageView.getDrawable()).start();
}
Gavin Liu wechat
欢迎您扫一扫上面的二维码,订阅我的微信公众号!