第 15 章:圆形菜单
原文链接
作者: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 翻译组翻译,已经获得作者翻译授权。