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

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

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

android:height="200dp"

android:width="200dp"

android:viewportHeight="100"

android:viewportWidth="100">

android:name="path1"

android:strokeColor="@color/colorAccent"

android:strokeWidth="5"

android:strokeLineCap="round"

android:pathData="

M 20,80

L 50,80,80,80"/>

android:name="path2"

android:strokeColor="@color/colorAccent"

android:strokeWidth="5"

android:strokeLineCap="round"

android:pathData="

M 20,50

L 50,50,80,50"/>

android:name="path3"

android:strokeColor="@color/colorAccent"

android:strokeWidth="5"

android:strokeLineCap="round"

android:pathData="

M 20,20

L 50,20,80,20"/>

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

2.写objectAnimator文件

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

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

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

android:drawable="@drawable/svg_vecotr_1">

android:animation="@animator/anim_path1"

android:name="path1"/>

android:animation="@animator/anim_path2"

android:name="path3"/>

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