需求:圆环菜单栏
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