前言

使用Swift實現的轉盤選單，主要用到UIBezierPath、CALayer遮罩繪製扇形UIView，CATransform3DMakeRotation實現旋轉動畫。程式碼設計使用預設configureCallback回撥方便建立和設定基本屬性，參考UITableView代理和資料來源模式，支援AutoLayout和Frame。

作為一個開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的iOS交流群：196800191，加群密碼：112233，不管你是小白還是大牛歡迎入駐 ，分享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