Android将图标转换为另一个 [英] Android transform icon into another one

问题描述

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

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?

推荐答案

图标动画可以使用

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="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指定动画的持续时间.

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="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告诉要完成动画.

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="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>

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

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.

这篇关于Android将图标转换为另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！