Android矢量图动画AnimatedVectorDrawable
AnimationDrawable
是依次加载一系列Drawable资源以每一帧的顺序和持续时间以实现的动画。这种动画的XML文件位于Android项目res/drawable/的目录中。
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>
AnimatedVectorDrawable
是一种可绘制矢量的属性变换形成的动画,通过旋转矢量或更改路径数据以将其变形为其他图像。
通常,您在三个XML文件中定义矢量动画:
- 一种载体,需要绘制的矢量图形<vector>位于res/drawable/下
- 绘制的动画矢量,其中带有<animated-vector> 位于res/drawable/
- 一个或多个对象动画,<objectAnimator>元素位于 res/animator/
矢量动画可以为<group>和 <path>元素的属性来设置动画。
<group>元素定义了一组路径或子组
<path>元素定义要绘制的路径。
详细属性
定义要设置动画的矢量对象时,使用该android:name 属性为组和路径分配唯一的名称,以便可以从动画中引用它们
res/drawable/vectordrawable.xml
<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>
动画定义表示ObjectAnimator或AnimatorSet对象。下面将目标组旋转360度:
res/animator/rotation.xml
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
下面使矢量可绘制对象的路径从一种形状变形为另一种形状。
两个路径都必须兼容以进行变形:每个路径必须具有相同数量的命令和相同数量的参数。
res/animator/path_morph.xml
<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>
通过名称来引用矢量中可绘制的组和路径:
res/drawable/animatorvectordrawable.xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@animator/rotation" />
<target
android:name="v"
android:animation="@animator/path_morph" />
</animated-vector>
或者
通过名称来引用矢量中可绘制的组和路径
由于AAPT工具支持一种将几个相关XML文件捆绑在一起的新格式,因此我们可以将前面示例中的XML文件合并为一个XML文件:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt" >
<aapt:attr name="android:drawable">
<vector
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>
</aapt:attr>
<target android:name="rotationGroup"> *
<aapt:attr name="android:animation">
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
</aapt:attr>
</target>
<target android:name="v" >
<aapt:attr name="android:animation">
<set>
<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>
</aapt:attr>
</target>
</animated-vector>