需求:圆环菜单栏
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.trans
圆环菜单栏设计与实现

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

被折叠的 条评论
为什么被折叠?



