Chapter 15 圆形菜单
在应用的中心放一个菜单，Jake 这个想法非常漂亮，不过实现起来也非常难。特别是还要计算动画时间，实现流畅的动画效果。首先需要分解这个动画，分解成一个一个的视觉组件；然后分解每个组件的动画效果，尤其是打开关闭时的动画效果；接着，我们处理一下手势、targets、actions，打磨一下 UI 里的 label 显示效果。
1. 思路
思路非常简单：屏幕中心有一个居中的图标，点击后转换成一个圆形的菜单，里面有 12 个星座图标按钮，点击某个星座按钮后，菜单又回到一开始的样子：屏幕中心的一个图标按钮。非常明了。
Figure:
为了实现这样的效果，我们会分别处理每个组件的动画，然后把各个组件组合在一起，形成最后的效果。
1.1. 圆环
菜单里的主要视觉效果就是出现的一系列的圆环，在快要结束的时候，会出现两个圆环和一些点，打开状态下实际上有七个圆环：一个粗一点的，五个细一点的，一个带有破折号的。最上面这个有十一个分割线，把十二个图标分割开来。在这一部分我们会实现基本的动画，然后实现剩下的交互功能，最终实现完整的菜单。
1.2. 图标
图标是整个应用的核心部分，每个图标有不同的位置。这些图标不仅仅是看着好看，动画效果也让整个菜单看起来栩栩如生：在关闭状态下，这些图标看起来像是一些点，在打开状态时，会展现完整的样子、从关闭到打开的过程，我们需要一个非常棒的移动过程，通过动画展现整个过程。
1.3. 选择器
菜单出现后，当用户点击某个图标按钮，我们希望该按钮的背景高亮，表示这个按钮被选中。有两个方法可以实现：我们可以生成十二个形状并更改它们的填充色；我们还可以创建一个遮罩形状并旋转它。无论是哪种方法，我们都需要思考用户使用哪种手势来触发点击。
1.4. 手势
正确的手势会对我们的应用产生很大影响。我们希望应用里的交互简单明了，同时想让用户看到一些新奇的手势功能。我们还要想办法解决打开状态、选择图标和关闭状态之间的平衡，在这个过程中不能有太多的手势和动作。
1.5. UI
为了给菜单和应用增加更多内容，我们要增加一个标题 label，显示当前选中的图标；一个 info 按钮，能够打开信息面板；一个说明 label，仅出现在用户第一次打开应用，还没点击菜单时(比如，如果用户不知道如何使用菜单，该 label 显示使用说明)。最后，我们还要增加一点阴影效果，在打开菜单时阴影消失。有了阴影的对比，在弹出菜单时，菜单和背景就可以区分开。
1.6. 动画
所有的状态都要遵循下列动画效果：
所有的动画都是从中心向外扩展，看起来像是从一条粗线里出来的。
分割线的动画效果是随机的。
图标开始是一个点，然后慢慢向外扩大直到到达最后的位置，从点扩大成最终的外形。
转换最后出现 info 按钮
在转换过程中，阴影渐渐消失。
选中一个图标后，显示高亮效果。
用户关闭菜单，或者选择 info 按钮后，所有的动画反向进行。
2. 分解
把所有的工作分解成下列步骤，每个步骤单独开发，最后将所有的步骤组合在一起：
创建 MenuRings 类，处理菜单的基本外形
创建 MenuIcons 类，处理图标的呈现和动画效果
创建 MenuSelector 类，处理手势、选择器、信息页按钮和菜单里的标签
创建 MenuShadow 类，处理阴影的动画效果
创建 Menu 类，把上述的效果组合在一起
