圆环菜单栏

本文介绍了一种圆环菜单栏的设计与实现方法,包括按钮沿圆弧排列、滑动时按钮滚动、按钮对准中心及放大效果。通过计算坐标和角度实现了平滑的动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:圆环菜单栏

1.界面显示5个按钮,圆弧排列

2.左右滑动,按钮可以在圆弧轨迹上滚动

3.点击按钮,按钮滚动到中间

4.中间位置按钮放大

思路:

1.先画外圆,按钮位于大圆内部

2.实现滑动的时候按钮按圆环轨迹移动

滑动的时候计算每个按钮的x值,再根据公式计算y的值

因为(x-a)^2 + (y - b)^2 = r^2  

所以 y = sqrt(r^2 - (x-a)^2) + b

这样滑动的时候可以遍历所有按钮,重新赋值x,y的值

3.还是在滑动的时候计算出每个按钮的角度

中间的按钮不转动,计算每个按钮和中间按钮y轴的夹角,以便转动夹角实现每个按钮都对准中心点位置

先根据2个圆A,B的坐标,通过距离公式 计算出距离l  = sqrt((x1-x2)^2 + (y1-y2)^2)

再通过角度公式 ,计算圆心角度数 n = 2 asin(l/2r)

最后旋转按钮

button.transform = CGAffineTransformMakeRotation(n);

4.滑动完成后判断哪个按钮离中心点近,让这个按钮对准中点,并放大这个按钮

button.transform = CGAffineTransformScale(view.transform, 1.2, 1.2);

ps:和button.transform = CGAffineTransformMakeScale(1.2, 1.2)的区别

后者会重置这个view的transfrom属性的效果,前者会叠加CGAffine效果

代码:https://github.com/RockyFung/FJCircleMenuDemo

参考:https://www.jb51.net/article/112908.htm  参考代码:https://github.com/xuuhan/HXCamberMenu

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值