安卓里挺多拖動(dòng)時(shí)間的鬧鐘的，iOS里沒(méi)見(jiàn)過(guò)，寫(xiě)了一下午，給大家一個(gè)思路，先看效果

Untitled.gif

準(zhǔn)備工作
表盤(pán)圖片、中間的兩個(gè)小圓的圖片和表針的圖片

思路：
首先想要旋轉(zhuǎn)表針，那么就需要找到表針的中心點(diǎn)，那么會(huì)發(fā)現(xiàn)，我找不到旋轉(zhuǎn)的點(diǎn)，如果是針的中點(diǎn)，針的尾端會(huì)出來(lái)好長(zhǎng)一截，像這樣

WechatIMG143.jpeg

當(dāng)然也可以直接讓UI做圖直接把尾部部分隱藏，但是又有了一個(gè)問(wèn)題，尾部部分也可以響應(yīng)手勢(shì)，所以這個(gè)方案并不是那么完美
所以需要旋轉(zhuǎn)的不能是針，而是另外一個(gè)透明的view，而針是跟著這個(gè)view旋轉(zhuǎn)的
那么下面就好辦了
一個(gè)pan手勢(shì)，然后算角度最后旋轉(zhuǎn)就ok
上代碼

WechatIMG141.jpeg

1、先放表盤(pán)

        let plate = UIImageView.init(image: )
        plate.ScaleSizeToFit()
        plate.origin = CGPoint(x: bounds.width * 0.5 - plate.width * 0.5, y: SCaleH(60))
        addSubview(plate)

2、中等圓在表盤(pán)的中心

        let zhongDeng = UIImageView.init(image: )
        zhongDeng.sizeToFit()
        zhongDeng.isUserInteractionEnabled = true
        zhongDeng.clipsToBounds = false
// 這里寬高要等于屏幕的寬高, contentMode = center 是讓這個(gè)imageView除了圖片其余部分為透明
        zhongDeng.width = bounds.width
        zhongDeng.height = zhongDeng.width
        zhongDeng.contentMode = .center
        zhongDeng.origin = CGPoint(x: plate.x + plate.width * 0.5 - zhongDeng.width * 0.5, y: plate.y + plate.height * 0.5 - zhongDeng.height * 0.5)
        addSubview(zhongDeng)

3、放一個(gè)透明的View, 因?yàn)橹械葓A是有陰影的, 如果直接旋轉(zhuǎn)中的中等圓，陰影也會(huì)跟著旋轉(zhuǎn)，所以一個(gè)透明的 view 是最好的選擇

        let zhongDengBg = UIView(frame: zhongDeng.bounds)
        zhongDeng.addSubview(zhongDengBg)

4、小圓

        let xiaoYuan = UIImageView.init(image: #imageLiteral(resourceName: "xiaoYuan"))
        xiaoYuan.sizeToFit()
        xiaoYuan.isUserInteractionEnabled = true
        xiaoYuan.clipsToBounds = false
        xiaoYuan.origin = CGPoint(x: zhongDeng.width * 0.5 - xiaoYuan.width * 0.5, y: zhongDeng.height * 0.5 - xiaoYuan.height * 0.5)

5、表針

        tableNeedle初始化
        tableNeedle.SizeToFit()
        tableNeedle.isUserInteractionEnabled = true
        let tableneedleScale: CGFloat = 1 - 70 / 395
        tableNeedle.x = zhongDeng.width * 0.5 - tableNeedle.width * 0.5
        tableNeedle.y = zhongDeng.height * 0.5 - tableNeedle.height * tableneedleScale
        zhongDengBg.addSubview(tableNeedle)

        zhongDeng.addSubview(xiaoYuan)

6、手勢(shì)

        let pan = UIPanGestureRecognizer(target: self, action: #selector(panHandle(gesture:)))
        tableNeedle.addGestureRecognizer(pan)

7、手勢(shì)方法

@objc fileprivate func panHandle(gesture: UIPanGestureRecognizer) {
        
        let touchPoint = gesture.location(in: zhongDeng.superview)// 手勢(shì)的位置
        var startPoint = tableNeedle.frame.origin// 角度開(kāi)始的位置
        let tableNeedleCenter = tableNeedle.superview!.center// 中心點(diǎn)
        startPoint.x += tableNeedle.bounds.width * 0.5// 角度開(kāi)始的 x 并不是表針的 x， 而應(yīng)該是表針 x 的中點(diǎn)
 
        var angle = AngleTools.getAngleBetweenLines(startPoint, line1End: tableNeedleCenter, line2Start: touchPoint, line2End: tableNeedleCenter)// 算出角度
        if touchPoint.x < startPoint.x {// 得出正確的位置
            angle = 360 - angle
        }
        
        print("angle: \(angle), lastAngle: \(lastAngle)")
        
        // 如果上一次指針在 6 - 12, 這一次在 0 - 3, 則認(rèn)為多了一個(gè)小時(shí)
        if lastAngle > 360 * 0.5 && angle < 360 * 0.25 {
            timing += 60
        }
        // 如果上一次指針在 0 - 3, 這一次在 6 - 12, 則認(rèn)為少了一個(gè)小時(shí)
        else if lastAngle < 360 * 0.25 && angle > 360 * 0.5 {
            if timing >= 60 {
                timing -= 60
            }
            // 如果時(shí)間小于 60 還到了 0 這里，說(shuō)明要負(fù)數(shù)了，做判斷不繼續(xù)旋轉(zhuǎn)
            else {
                tableNeedle.superview?.layer.transform = CATransform3DMakeRotation(0 / 180 * .pi, 0, 0, 1)
                lastAngle = 0
                timing = 0
                return
            }
        }
        tableNeedle.superview?.layer.transform = CATransform3DMakeRotation(angle / 180 * .pi, 0, 0, 1)// 旋轉(zhuǎn)
        timing += (angle - lastAngle) / minAngle
        lastAngle = angle
    }

完工

上代碼
https://github.com/haoburongyi/ZHAlarmClock.git

如果對(duì)你有用，請(qǐng)給個(gè)小心心??和小星星?