Android:矢量图动画AnimatedVectorDrawable

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>元素定义要绘制的路径。

详细属性

animation_drawable.png

定义要设置动画的矢量对象时,使用该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>

传送门google VectorDrawable Api

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。