第 15 章：圆形菜单

原文链接
作者：C4 开源项目
译者：Crystal Sun
全部章节请关注此文集C4教程翻译
校对后的内容请看这里

在应用的中心设计一个持续的菜单，Jake的这个想法非常漂亮，不过实现起来也非常难，特别是还要计算动画时间，实现流畅的动画效果。首先需要分解这个动画，分解成一个一个的视觉组件，然后分解每个组件的动画效果，尤其是打开关闭时的动画效果，接着，我们处理一下手势、targets、actions，打磨一下 UI 里的 label 显示效果。

概念定义

概念非常简单：屏幕中心有一个居中的图标，点击后转换成一个圆形的菜单，里面有12个星座图标按钮，点击某个星座按钮后，菜单又回到一开始的样子：屏幕中心一个图标按钮。非常明了。

菜单开始时的状态

为了实现这样的效果，我们会分别处理每个组件的动画，然后把各个组件组合在一起，形成最后的效果。

指环

菜单里的主要视觉效果就是出现的一系列的指环，在快要结束的时候，会出现两个指环和一些点，打开状态下实际上有七个指环：一个厚的，五个瘦的，一个带有破折号。最上面这个，有十一个分割线，把十二个图标分割开来。在这一部分我们会决定基本的动画，看起来更像是一个菜单，我们然后可以创建剩下的交互效果，完成点击效果。

图标

图标是整个应用的核心部分，每个图标有不同的位置。这些图标不仅仅是看着好看，动画效果也让整个菜单看起来像是活的：在关闭状态下，这些图标看起来像是一些点，在打开状态时，会展现完整的样子，从关闭到打开的过程，我们需要一个非常棒的移动过程，通过动画提现这个展现的过程。

选择器

菜单出现后，当用户点击某个图标按钮时，我们希望该按钮的背景高亮，表明这个按钮被选中了。有两个方法可以实现：我们会生成十二个 shapes，更改它们的填充色；或者，我们创建一个面具 shape，旋转它。不管那种方法，我们都需要考虑用户使用那种手势来出发点击。

手势

正确的手势会对我们应用的风格产生非常大的影响。我们希望应用里的交互都简单明了，然后我们也想让人们看到一些新奇的手势功能，我们还要想办法解决打开状态、选择图标和关闭状态之间的平衡，在这个过程中不能有太多的手势和动作。

UI

为了给菜单和应用增加更多内容，我们增加一个标题 label，显示当前选中的图标，一个 info 按钮，能够打开信息面板，一个说明 label，仅出现在用户第一次打开应用，还没点击菜单时（比如，如果用户不知道如何使用菜单，该 label 显示使用说明）。最后，我们还要增加一点阴影效果，在打开菜单时阴影仅仅消失，在阴影的对比下，在弹出菜单时，将菜单和背景区分开来。同样的，我们给上面的这些东西增加一些小技巧。

动画

所有的状态都要遵循下列动画效果：

1. 所有的动画都是从中心向外扩展，看起来像是从一条粗线里出来的。
2. 分割线的动画效果是随机的。
3. 图标开始是一个点，然后慢慢向外扩大直到到达最后的位置，从点扩大成最终的外形。
4. 转换最后出现 info 按钮
5. 在转换过程中，阴影渐渐消失。
6. 选中一个图标后，显示高亮效果。
7. 用户关闭菜单，或者选择 info 按钮后，所有的动画反向进行。

分解

把所有的工作分解成下列步骤，每个步骤单独开发，最后将所有的步骤组合在一起：

1. 创建 MenuRings 类，处理菜单的基本外形
2. 创建 MenuIcons 类，处理图标的呈现和动画效果
3. 创建 MenuSelector 类，处理手势、选择器、info 按钮和菜单里的 label
4. 创建 MenuShadow 类，处理阴影的动画效果
5. 创建 Menu 类，把上述的效果组合在一起

（糖馅饼？？！！）下一节继续。

本文由 SwiftGG 翻译组翻译，已经获得作者翻译授权。