安卓里挺多拖动时间的闹钟的，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
如果对你有用，请给个小心心❤️和小星星✨
