AnimatedVectorDrawable 实战

作者: rain 分类: 移动 发布时间: 2016-12-31 20:36 6 条评论

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

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

动画分解

查看 GIF 动画,可以发现该动画有三种动画组成:

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

素材收集

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

image
图标变化的五种状态

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

然后导出为 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个点,右边的两个点不可见。如下图:

image

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

淡入淡出

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

循环啊循环

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

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

其实在实现整个 AVD 循环的时候比预想的要复杂一点。 动画集合(Animation set)上的 repeatMode 顺序居然没有生效!已经给 Android 工程师提bug了! 通过监听动画播完的动画来修复这个问题。但是非常不幸的是,监听接口 在 API23 中才添加,所以要支持 API 21 版本可以通过 postDelayed 来实现。

最终动画效果

这里是整个项目的代码. Icon Animator 的整个项目点击这里

通过上面的介绍,希望您已经了解了 AnimatedVectorDrawable 是如何使用的。您现在也可以用 AnimatedVectorDrawable 来实现各种炫酷的动画啦!

本文出自 云在千峰,转载时请注明出处及相应链接。

本文永久链接: http://blog.chengyunfeng.com/?p=1028

Ɣ回顶部