ios 圆形旋转菜单_Chapter 15 圆形菜单

Chapter 15 圆形菜单

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

1. 思路

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

Figure:

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

1.1. 圆环

菜单里的主要视觉效果就是出现的一系列的圆环，在快要结束的时候，会出现两个圆环和一些点，打开状态下实际上有七个圆环：一个粗一点的，五个细一点的，一个带有破折号的。最上面这个有十一个分割线，把十二个图标分割开来。在这一部分我们会实现基本的动画，然后实现剩下的交互功能，最终实现完整的菜单。

1.2. 图标

图标是整个应用的核心部分，每个图标有不同的位置。这些图