iOS开发之转盘菜单—Swift
<h1>前言</h1><p>使用Swift实现的转盘菜单，主要用到UIBezierPath、CALayer遮罩绘制扇形UIView，CATransform3DMakeRotation实现旋转动画。代码设计使用默认configureCallback回调方便创建和设置基本属性，参考UITableView代理和数据源模式，支持AutoLayout和Frame。</p>
<p><strong>作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：812157648，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！</strong></p>
<h2>效果图</h2>
<p><img src="https://img-blog.csdnimg.cn/2020120818463650.jpg"></p>
<h2>1.遮罩绘制扇形View</h2>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">func setMaskLayer(_ startAngle: CGFloat, endAngle: CGFloat) {
let center </span>= CGPoint(x: bounds.width * <span style="color: rgba(128, 0, 128, 1)">0.5</span>, y: bounds.height * <span style="color: rgba(128, 0, 128, 1)">0.5</span><span style="color: rgba(0, 0, 0, 1)">)
let layer </span>=<span style="color: rgba(0, 0, 0, 1)"> CAShapeLayer()
path.addArc(withCenter: center, radius: bounds.width </span>* <span style="color: rgba(128, 0, 128, 1)">0.5</span>, startAngle: startAngle, endAngle: endAngle, clockwise: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">)
path.addLine(to: center)
layer.path </span>=<span style="color: rgba(0, 0, 0, 1)"> path.cgPath
layer.rasterizationScale </span>=<span style="color: rgba(0, 0, 0, 1)"> UIScreen.main.scale
layer.shouldRasterize </span>= <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
self.layer.mask </span>=<span style="color: rgba(0, 0, 0, 1)"> layer
}</span></pre>
</div>
<h2>2.中间镂空</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">func createHole(in view : UIView, radius: CGFloat) {
let path = CGMutablePath()
path.addArc(center: view.center, radius: radius, startAngle: 0.0, endAngle: 2.0 * .pi, clockwise: true)
path.addRect(CGRect(origin: .zero, size: view.bounds.size))
let maskLayer = CAShapeLayer()
maskLayer.path = path
maskLayer.fillRule = .evenOdd
view.layer.mask = maskLayer
view.clipsToBounds = true
}
</pre>
</div>
<p> </p>
<h2>3.旋转动画</h2>
<hr>
<p>添加UIPanGestureRecognizer、UITapGestureRecognizer手势，根据手势位置使用atan2函数计算旋转角度，然后用CATransform3DMakeRotation围绕Z轴旋转做动画 核心代码</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">func handlePanGesture(_ sender: UIPanGestureRecognizer) {
let location = sender.location(in: self)
switch sender.state {
case .began:
startPoint = location
case .changed:
let radian1 = -atan2(startPoint.x - menuLayerView.center.x, startPoint.y - menuLayerView.center.y)
let radian2 = -atan2(location.x - menuLayerView.center.x, location.y - menuLayerView.center.y)
menuLayerView.transform = menuLayerView.transform.rotated(by: radian2 - radian1)
startPoint = location
default:
let angle = 2 * CGFloat(Double.pi) / CGFloat(cells.count)
var menuViewAngle = atan2(menuLayerView.transform.b, menuLayerView.transform.a)
if menuViewAngle < 0 {
menuViewAngle += CGFloat(2 * Double.pi)
}
var index = cells.count - Int((menuViewAngle + CGFloat(Double.pi / 4)) / angle)
if index == cells.count {
index = 0
}
setSelectedIndex(index, animated: true)
}
}
func handleTapGesture(_ sender: UITapGestureRecognizer) {
let location = sender.location(in: menuLayerView)
for (index, cell) in cells.enumerated() {
if cell.path.contains(location) {
setSelectedIndex(index, animated: true)
}
}
}
</pre>
</div>
<p> </p>
<h2>4.弹出收起动画</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">func openMenuView(withAnimate animate: Bool = true) {
openMenu = true
UIView.animate(withDuration: animate ? configure.animationDuration : 0, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 5.0, options: .curveEaseInOut) {
self.centerButton.transform = CGAffineTransform(rotationAngle: .pi * -0.5)
self.centerButton.setImage(self.configure.closeImage, for: .normal)
self.menuLayerView.transform = CGAffineTransform(scaleX: 1, y: 1).rotated(by: self.currentAngle)
}
}
func closeMenuView(withAnimate animate: Bool = true) {
openMenu = false
let scale = (configure.centerRadius * 2) / bounds.width
UIView.animate(withDuration: animate ? configure.animationDuration : 0, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 5.0, options: .curveEaseInOut) {
self.centerButton.transform = .identity
self.centerButton.setImage(self.configure.openImage, for: .normal)
self.menuLayerView.transform = CGAffineTransform(scaleX: scale, y: scale).rotated(by: self.currentAngle)
}
}
</pre>
</div>
<p> </p>
<h2>5.内部细节</h2>
<hr>
<p>考虑到方便布局和使用，内部使用UIView叠加旋转实现，这里也可以采用Layer直接绘制实现，相对UIView，层次结构会简单很多<strong><br></strong></p>
<h2>总结</h2>
<p>核心代码已经贴出，完整代码请查看----->>>CLDemo，如果对你有所帮助，欢迎Star。</p>
<p>原文作者：JmoVxia<br>原文地址：https://juejin.cn/post/6901870312829550605</p><br><br>
来源：https://www.cnblogs.com/fadaijun/p/14117003.html
頁:
[1]