Android“菜单图标变返回”动画

此例用到SVG动画，其中涉及三个XML文件，分别为：Vector矢量图，objectAnimator动画，以及一个animated-vector文件将前两个文件联合起来。

1.在drawable文件夹下新建vector文件描述矢量图

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <group>
        <path
            android:name="path1"
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="
            M 20,80
            L 50,80,80,80"/>

        <path
            android:name="path2"
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="
            M 20,50
            L 50,50,80,50"/>

        <path
            android:name="path3"
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="5"
            android:strokeLineCap="round"
            android:pathData="
            M 20,20
            L 50,20,80,20"/>
    </group>

</vector>

因为要改变第一条和第三条线的，只要两个点就够了，但是为了动画美观过渡更自然，我们使用三个点来描绘。其中M代表moveto:即起点坐标，L代表lineto:即后续点点到哪里，在这个动画中我们描绘了三条线，第一条:最下面一条，（20,80）到（50,80）再到（80,80）剩下两条以此类推。

2.写objectAnimator文件

在这个文件中我们需要描绘每条线的动画路径。下面是line1的动画，即最下面的动画，这个文件建立在animator文件夹中，并不是anim文件夹。

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:propertyName="pathData"
    android:valueFrom="
                M 20,80
                L 50,80,80,80"

    android:valueTo="
                M 20,50
                L 50,80,50,80"
    android:valueType="pathType"
    android:interpolator="@android:anim/linear_interpolator">

</objectAnimator>

这个文件中有几个属性，我们解释一下valueFrome以及valueTo这两个关键属性：

 android:valueFrom="
                M 20,80
                L 50,80,80,80"

表示从原来的其实位置移动到

android:valueTo="
                M 20,50
                L 50,80,50,80"

的位置，最下面的interpolator插值器则描绘了动画的缓冲路径。

3.建立animated-vector文件

将上述两个文件粘合在一起，从而完成动画绘制，这个文件同样建立在drawable文件夹中。

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_vecotr_1">
    <target
        android:animation="@animator/anim_path1"
        android:name="path1"/>

    <target
        android:animation="@animator/anim_path2"
        android:name="path3"/>
</animated-vector>

其中target标签中的animation就是我们vectorAnimator动画，name就是vector文件中的线条。

4.引用

在布局文件中使用android:src="@drawable/svg_1"即可，这个引用的是第三个animated-vector文件。

5.在代码中注册

首先为引用该资源的view注册点击事件，自点击事件中初始化动画：

 private void animate() {
        Drawable drawable  = imageView.getDrawable();
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).start();
        }
    }

ezgif-2-a37b90817c.gif