iOS开发之转盘菜单—Swift
前言
使用Swift实现的转盘菜单,主要用到UIBezierPath、CALayer遮罩绘制扇形UIView,CATransform3DMakeRotation实现旋转动画。代码设计使用默认configureCallback回调方便创建和设置基本属性,参考UITableView代理和数据源模式,支持AutoLayout和Frame。
作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS交流群:812157648,不管你是小白还是大牛欢迎入驻 ,分享BAT,阿里面试题、面试经验,讨论技术, 大家一起交流学习成长!
效果图
1.遮罩绘制扇形View
func setMaskLayer(_ startAngle: CGFloat, endAngle: CGFloat) { let center = CGPoint(x: bounds.width * 0.5, y: bounds.height * 0.5) let layer = CAShapeLayer() path.addArc(withCenter: center, radius: bounds.width * 0.5, startAngle: startAngle, endAngle: endAngle, clockwise: true) path.addLine(to: center) layer.path = path.cgPath layer.rasterizationScale = UIScreen.main.scale layer.shouldRasterize = true self.layer.mask = layer }
2.中间镂空
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 }
3.旋转动画
添加UIPanGestureRecognizer、UITapGestureRecognizer手势,根据手势位置使用atan2函数计算旋转角度,然后用CATransform3DMakeRotation围绕Z轴旋转做动画 核心代码
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) } } }
4.弹出收起动画
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) } }
5.内部细节
考虑到方便布局和使用,内部使用UIView叠加旋转实现,这里也可以采用Layer直接绘制实现,相对UIView,层次结构会简单很多
总结
核心代码已经贴出,完整代码请查看----->>>CLDemo,如果对你有所帮助,欢迎Star。
原文作者:JmoVxia
原文地址:https://juejin.cn/post/6901870312829550605