iOS写一个手动拖动定时器

安卓里挺多拖动时间的闹钟的，iOS里没见过，写了一下午，给大家一个思路，先看效果

Untitled.gif

准备工作
表盘图片、中间的两个小圆的图片和表针的图片

思路：
首先想要旋转表针，那么就需要找到表针的中心点，那么会发现，我找不到旋转的点，如果是针的中点，针的尾端会出来好长一截，像这样

WechatIMG143.jpeg

当然也可以直接让UI做图直接把尾部部分隐藏，但是又有了一个问题，尾部部分也可以响应手势，所以这个方案并不是那么完美
所以需要旋转的不能是针，而是另外一个透明的view，而针是跟着这个view旋转的
那么下面就好办了
一个pan手势，然后算角度最后旋转就ok
上代码

WechatIMG141.jpeg

1、先放表盘

        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、中等圆在表盘的中心

        let zhongDeng = UIImageView.init(image: )
        zhongDeng.sizeToFit()
        zhongDeng.isUserInteractionEnabled = true
        zhongDeng.clipsToBounds = false
// 这里宽高要等于屏幕的宽高, contentMode = center 是让这个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、放一个透明的View, 因为中等圆是有阴影的, 如果直接旋转中的中等圆，阴影也会跟着旋转，所以一个透明的 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、手势

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

7、手势方法

@objc fileprivate func panHandle(gesture: UIPanGestureRecognizer) {
        
        let touchPoint = gesture.location(in: zhongDeng.superview)// 手势的位置
        var startPoint = tableNeedle.frame.origin// 角度开始的位置
        let tableNeedleCenter = tableNeedle.superview!.center// 中心点
        startPoint.x += tableNeedle.bounds.width * 0.5// 角度开始的 x 并不是表针的 x， 而应该是表针 x 的中点
 
        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, 则认为多了一个小时
        if lastAngle > 360 * 0.5 && angle < 360 * 0.25 {
            timing += 60
        }
        // 如果上一次指针在 0 - 3, 这一次在 6 - 12, 则认为少了一个小时
        else if lastAngle < 360 * 0.25 && angle > 360 * 0.5 {
            if timing >= 60 {
                timing -= 60
            }
            // 如果时间小于 60 还到了 0 这里，说明要负数了，做判断不继续旋转
            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)// 旋转
        timing += (angle - lastAngle) / minAngle
        lastAngle = angle
    }

完工

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

如果对你有用，请给个小心心❤️和小星星✨