AnimatedVectorDrawable 实战

2016-12-31 22:05:00

本文是 Android 设计师和开发者 Nick Butcher 介绍如何用 AnimatedVectorDrawable 来实现一个 GIF 动画的过程。

上图为需要实现的动画，由 @lekarew 设计并发表在 Dribble 上 http://drbl.in/2470871 .

动画分解

查看 GIF 动画，可以发现该动画有三种动画组成：

地图图标变形和跳跃的动画， AnimatedVectorDrawable（AVD）支持对路径变化做动画，所以可以使用路径变形（ path morphing ）来实现该动画（只能在 API 21+ 版本上使用该功能）
往左移动的点，简单的位移动画即可实现该效果
点从右边进入和从左边退出显示和隐藏的动画。

素材收集

由于 Nick Butcher 并没有该动画的源文件，只有一个 GIF 图，所以 Nick Butcher 在 Photoshop 中打开该 GIF 图，并查看每帧动画的图并从中提取需要的素材。针对地图图标变形的动画，从里面提取了五种典型的状态，然后把这五种图导入到 Sketch 中（Sketch 是 Nick Butcher 比较喜欢的一个矢量图编辑工具）：

图标变化的五种状态

有些工具可以根据图片自动提取出矢量图数据。但是这里由于需要实现路径变形的动画，就需要每个状态的路径个数是一样的，这里就通过手工调整的方式来确定每个状态的路径信息，每个图分别有8个点和两个控制点来定义路径信息。如下图：

然后导出为 SVG 文件。需要注意的是， Android 只支持 SVG 规范中的一部分内容。通过使用 SVGO （使用了 Jake Archibald 创建的 SVGOMG ）工具来把导出的 SVG 文件给处理一下方便在 Android 上使用。

动起来

现在已经有了五种图标的状态了，是时候让他们动起来了。这里使用了 Roman Nurik 搞的 Icon Animatior 工具来制作动画。这个工具可以在浏览器上制作 AnimatedVectorDrawable 。

首先把第一个 SVG 文件导入进去。然后点击该文件图层上的秒表图标，然后添加一个新的 pathData 动画。然后会显示一个输入路径信息的界面，然后在 toValue 中输入路径下一个状态信息。然后重复创建这个状态的动画，最后一个路径信息和第一个是一样的，形成一个循环。详情查看下面的视频：

每个状态的时间，参考原来的 GIF 图中的时间间隔来设置，每帧为 30ms，4帧一共 120ms。这里使用了标准的纸墨设计风格的插值器（interpolator），为了更好的动画效果，还可以微调一下。

处理移动的点

对于移动的点，可以用一个简单的位移动画。注意每第三个点比较大并且颜色为红色的；如何优雅的实现这个效果并且形成一个无线循环是比较重要的。一种实现方式就只使用3个点，单独的移动每个点；这里 Nick Butcher 决定使用 5个点，右边的两个点不可见。如下图：

这样的话，可以一起移动所有的点，当第四个点移动到第一个点的位置的时候，可以重置当前的动画，重新开始移动！完美实现需要的效果！

淡入淡出

点进来和出去的时候，还需要有淡入淡出的效果，这通过简单的 fillAlpha 动画即可实现。具体如何做，自行研究一下吧，或者可以查看实现的代码。这里就不在介绍。

循环啊循环

循环播放动画还是有一些地方需要注意。点移动的时间是图标跳跃时间的三倍。为了方便，把动画分别放到两个 AVD 中，然后把他们放到一起，这样可以更简单的处理时间问题。

点击 Icon Animator 中的导出按钮，会生成一个 AVD 文件。由于这个工具还是预览状态，所以为了使生成的文件更好看，又做了一些手工调整，删除多余的属性，并且把各种重复的值定义到资源文件中，这样更方便维护代码。

其实在实现整个 AVD 循环的时候比预想的要复杂一点。动画集合（Animation set）上的 repeatMode 顺序居然没有生效！已经给 Android 工程师提bug了！通过 [监听动画播完](https://gist.github.com/nickbutcher/97143b3240682e5c5851fe45b49fde93# file-mainactivity-java-L35) 的动画来修复这个问题。但是非常不幸的是， [监听接口](https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html# registerAnimationCallback%28android.graphics.drawable.Animatable2.AnimationCallback%29) 在 API23 中才添加，所以要支持 API 21 版本可以通过 postDelayed 来实现。