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

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

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

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

2.写objectAnimator文件

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

这个文件中有几个属性，我们解释一下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文件夹中。

其中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