Android将图标转换为另一个

本文介绍了Android将图标转换为另一个的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我怎样才能将一个图标的动画归档为另一个图标，例如将汉堡变成箭头(导航抽屉)或将铅笔变成十字架(收件箱)?如何存档此动画?

how can I archieve the animation of an icon being tranformed into another one, like the burger into the arrow (navigation drawer) or the pencil into the cross (inbox)? How can I archieve this animation?

推荐答案

图标动画可以使用 animated-vector

The icon animation can be achieved using animated-vector

首先将图标定义为矢量可绘制对象.例如，让我们在此处找到一个十字动画.我们将ic_tick设置为ic_cross的动画.

First define your icons as vector drawables. For example, let's take up a tick to cross animation as found here. We will animate ic_tick to ic_cross.

ic_cross.xml

<vector xmlns:android="schemas.android/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="schemas.android/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指定动画的持续时间.

Next we create animators for each of the steps. valueFrom tells the starting point of the animation and valueTo is the final product of the animation. interpolator is the type of interpolation, and you can find a lot more in Android docs. duration specifies the duration of the animation.

tick_to_cross.xml

<objectAnimator xmlns:android="schemas.android/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告诉要完成动画.

Now, using animated-vector, we animate the vector. Here <target android:name specifies the target on which the animation has to be done, and android:animation tells the animation to be done.

avd_tick_to_cross.xml

<animated-vector xmlns:android="schemas.android/apk/res/android" android:drawable="@drawable/ic_tick"> <target android:name="@string/tick" android:animation="@animator/tick_to_cross" /> </animated-vector>

如何在可绘制矢量之间进行动画制作有一些限制，但是如果您清楚地知道要对哪些内容进行动画处理以及动画应该如何运行，则可以通过某种方式入侵它们.

There are a few limitations on how to animate between drawable vectors, but they can be hacked in some way or other, if you have a clear picture what to animate to what, and how the animation should go.