Android转换图标到另一个

Question

我怎样才能将图标的动画转换为另一个图标,例如箭头(导航抽屉)中的汉堡或十字架(收件箱)中的铅笔？我怎样才能实现这个动画？

Answer 1

可以使用图标动画来实现 animated-vector

首先将您的图标定义为矢量绘图.例如,让我们用勾选来交叉动画,如此处所示.我们将动画ic_tick到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>

关于如何在可绘制矢量之间进行动画制作有一些限制,但是如果你有一个清晰的画面,那么它们可以以某种方式被黑客攻击,动画应该是什么,以及动画应该如何进行.

Answer 2

您可以使用Alex Lockwood创建的ShapeShifter将图标转换为另一个。您可以阅读这篇中等文章和这个YouTube 视频，以对 ShapeShifter 有一个清晰的概念