原文链接
作者：C4 开源项目
译者：Crystal Sun
全部章节请关注此文集C4教程翻译
校对后的内容请看这里
在应用的中心设计一个持续的菜单，Jake的这个想法非常漂亮，不过实现起来也非常难，特别是还要计算动画时间，实现流畅的动画效果。首先需要分解这个动画，分解成一个一个的视觉组件，然后分解每个组件的动画效果，尤其是打开关闭时的动画效果，接着，我们处理一下手势、targets、actions，打磨一下 UI 里的 label 显示效果。
概念定义
概念非常简单：屏幕中心有一个居中的图标，点击后转换成一个圆形的菜单，里面有12个星座图标按钮，点击某个星座按钮后，菜单又回到一开始的样子：屏幕中心一个图标按钮。非常明了。
为了实现这样的效果，我们会分别处理每个组件的动画，然后把各个组件组合在一起，形成最后的效果。
指环
菜单里的主要视觉效果就是出现的一系列的指环，在快要结束的时候，会出现两个指环和一些点，打开状态下实际上有七个指环：一个厚的，五个瘦的，一个带有破折号。最上面这个，有十一个分割线，把十二个图标分割开来。在这一部分我们会决定基本的动画，看起来更像是一个菜单，我们然后可以创建剩下的交互效果，完成点击效果。
图标
图标是整个应用的核心部分，每个图标有不同的位置。这些图标不仅仅是看着好看，动画效果也让整个菜单看起来像是活的：在关闭状态下，这些图标看起来像是一些点，在打开状态时，会展现完整的样子，从关闭到打开的过程，我们需要一个非常棒的移动过程，通过动画提现这个展现的过程。
选择器
菜单出现后，当用户点击某个图标按钮时，我们希望该按钮的背景高亮，表明这个按钮被选中了。有两个方法可以实现：我们会生成十二个 shapes，更改它们的填充色；或者，我们创建一个面具 shape，旋转它。不管那种方法，我们都需要考虑用户使用那种手势来出发点击。
手势
正确的手势会对我们应用的风格产生非常大的影响。我们希望应用里的交互都简单明了，然后我们也想让人们看到一些新奇的手势功能，我们还要想办法解决打开状态、选择图标和关闭状态之间的平衡，在这个过程中不能有太多的手势和动作。
UI
为了给菜单和应用增加更多内容，我们增加一个标题 label，显示当前选中的图标，一个 info 按钮，能够打开信息面板，一个说明 label，仅出现在用户第一次打开应用，还没点击菜单时（比如，如果用户不知道如何使用菜单，该 label 显示使用说明）。最后，我们还要增加一点阴影效果，在打开菜单时阴影仅仅消失，在阴影的对比下，在弹出菜单时，将菜单和背景区分开来。同样的，我们给上面的这些东西增加一些小技巧。
动画
所有的状态都要遵循下列动画效果：
- 所有的动画都是从中心向外扩展，看起来像是从一条粗线里出来的。
- 分割线的动画效果是随机的。
- 图标开始是一个点，然后慢慢向外扩大直到到达最后的位置，从点扩大成最终的外形。
- 转换最后出现 info 按钮
- 在转换过程中，阴影渐渐消失。
- 选中一个图标后，显示高亮效果。
- 用户关闭菜单，或者选择 info 按钮后，所有的动画反向进行。
分解
把所有的工作分解成下列步骤，每个步骤单独开发，最后将所有的步骤组合在一起：
- 创建 MenuRings 类，处理菜单的基本外形
- 创建 MenuIcons 类，处理图标的呈现和动画效果
- 创建 MenuSelector 类，处理手势、选择器、info 按钮和菜单里的 label
- 创建 MenuShadow 类，处理阴影的动画效果
- 创建 Menu 类，把上述的效果组合在一起
（糖馅饼？？！！）下一节继续。
本文由 SwiftGG 翻译组翻译，已经获得作者翻译授权。
