图标动画可以使用以下方式实现animated-vector http://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
首先将您的图标定义为矢量绘图。例如,让我们拿起一个勾来交叉动画,如图所示here https://github.com/udacity/ud862-samples/blob/master/TickCross/。我们将制作动画ic_tick
to ic_cross
.
ic_cross.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="@integer/viewport_width"
android:viewportHeight="@integer/viewport_height">
<group
android:name="@string/groupTickCross"
android:pivotX="@integer/viewport_center_x"
android:pivotY="@integer/viewport_center_y">
<path
android:name="@string/cross"
android:pathData="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
android:strokeWidth="@integer/stroke_width"
android:strokeLineCap="square"
android:strokeColor="@color/stroke_color"/>
</group>
</vector>
ic_tick.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="@integer/viewport_width"
android:viewportHeight="@integer/viewport_height">
<group
android:name="@string/groupTickCross"
android:pivotX="@integer/viewport_center_x"
android:pivotY="@integer/viewport_center_y">
<path
android:name="@string/tick"
android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
android:strokeWidth="@integer/stroke_width"
android:strokeLineCap="square"
android:strokeColor="@color/stroke_color"/>
</group>
</vector>
接下来我们为每个步骤创建动画师。valueFrom
告诉动画的起点valueTo
是动画的最终成品。interpolator
是插值的类型,您可以在 Android 文档中找到更多信息。duration
指定动画的持续时间。
tick_to_cross.xml
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="pathData"
android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7"
android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4"
android:duration="@integer/duration"
android:interpolator="@android:interpolator/fast_out_slow_in"
android:valueType="pathType"/>
现在,使用动画矢量,我们对矢量进行动画处理。这里<target android:name
指定必须执行动画的目标,以及android:animation
告诉动画要完成。
avd_tick_to_cross.xml
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_tick">
<target
android:name="@string/tick"
android:animation="@animator/tick_to_cross" />
</animated-vector>
如何在可绘制矢量之间设置动画有一些限制,但如果您清楚地了解要为什么设置动画以及动画应该如何进行,则可以通过某种方式对它们进行修改。