如何制作一个图标在一个圆圈中旋转的菜单?

Posted

技术标签:

【中文标题】如何制作一个图标在一个圆圈中旋转的菜单?【英文标题】:How to make a menu with icons spinning in a circle? 【发布时间】:2013-04-23 14:18:11 【问题描述】:

我正在尝试为我的应用程序创建一个带有几个图标的菜单。用户应该能够旋转这个菜单,使图标围绕这个圆形路径改变它们的位置,但不能自行旋转。我之前读过这个http://www.raywenderlich.com/9864/how-to-create-a-rotating-wheel-control-with-uikit,所以我可以看到如何跟随手指移动,但我需要这个菜单在触摸结束后进行惯性旋转。我有 2 个关于如何执行此操作的问题。

第一个,制作带有图标绕圈移动的动画的最佳方法是什么?它应该会减速直到停止,如果用户移动手指的速度足够快,它应该能够完成一整圈以上的动作。

其次,我如何测量手指运动结束时的速度?我尝试使用 locationInView 和 previousLocationInView 并通过它们之间的角度差乘以某个常数来旋转它。问题是,当我将手指放在一个地方一段时间并拿起它时,我仍然会得到圆圈的惯性运动,在这种情况下我根本不希望它移动。

【问题讨论】:

【参考方案1】:

您想使用滚动视图。具体来说,您需要一个隐藏的滚动视图,您可以在其中将平移手势识别器从滚动视图附加到您的自定义菜单视图。然后你实现滚动视图的委托方法来重绘你的菜单。 This WWDC video has a good overview of the process.这种方法的好处是你可以免费获得真正的ios风格的加速和减速。您无需担心手指位置或速度,只需担心滚动视图的内容偏移量。

除非您想用手指在菜单项上转一圈。那是一场不同的球赛……

理论上,可以使用与上述相同的方法将手指旋转一圈。您需要确保 directionalLockEnabled 在滚动视图上设置为 NO。问题是确定菜单视图旋转的计算要复杂得多。可能您希望成为模态并检查回调中的滚动视图是否为dragging。如果它正在拖动,您将使用平移手势上的触摸来找到确切的手指位置来设置旋转。您还希望保留有关手指移动瞬时方向的数据,以便在释放触摸时...如果它没有拖动,则使用滚动视图内容偏移量对旋转应用减速效果(使用在触摸被释放之前滚动方向知道如何使用内容偏移变化)。

【讨论】:

是的,这正是我想要做的。

以上是关于如何制作一个图标在一个圆圈中旋转的菜单?的主要内容,如果未能解决你的问题,请参考以下文章

在一个圆圈中制作 Font Awesome 图标?

如何创建一个旋转的圆圈?

如何在 SwiftUI 中制作对角线轮播

如何在 CSS 中转换/动画菜单图标?

制作带有css边框的SVG图标作为一个元素

Android 制作类似支付圆圈和打钩界面ProgressWheel