SwiftUI rotationEffect - How to go clockwise only? - swiftui

Question

(Xcode 11.4 · Swift 5 · iOS Target 13.4)
The stripped down SwiftUI iOS code below creates a View that contains a clock's smoothly rotating secondhand. It works fine except that the animation runs anticlockwise when the seconds value changes from 59 to 0. How can I force the secondhand to rotate clockwise only?
import SwiftUI
struct ClockView: View {
#State var now = Date()
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
var body: some View {
ZStack {
Pointer()
.stroke(Color.orange, lineWidth: 1)
.rotationEffect(Angle.degrees(360 * now.second / 60))
.animation(Animation.linear(duration: 1.0))
.frame(width: 300, height: 300)
}.onReceive(timer) { time in
self.now = time
}
}
}
struct ClockView_Previews: PreviewProvider {
static var previews: some View {
ClockView()
}
}
struct Pointer: Shape {
func path(in rect: CGRect) -> Path {
Path { p in
p.move(to: CGPoint(x: rect.midX, y: rect.minY))
p.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
}
}
}
extension Date {
var second: Double {
return Double(Calendar.current.dateComponents([.second], from: self).second ?? 0)
}
}

Answer 1

Try the code below. The strategy here is to turn off the animating of the moving hand once a minute. When the animation is off the angle can be adjusted without getting un-wanted wrap-around rotation. There might be an easier way to do this, but this definitely does the job.
struct ClockView: View {
#State var seconds : Double = 0
let timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()
var body: some View {
ZStack {
Pointer()
.stroke(Color.orange, lineWidth: 1)
.rotationEffect(Angle.degrees(360 * seconds / 60))
.frame(width: 300, height: 300)
}.onReceive(timer) { time in
self.seconds = Date().second
if self.seconds == 60.0 {
withAnimation(.none) {
self.seconds = 0.01 }
}
withAnimation(Animation.linear(duration: 1.0)) {
self.seconds = round(self.seconds + 1)
}
}
}
}

Answer 2

Sorry to be late to the party, but I had the same issue with animating a boat whose course changed from 359º to 1º. Its not the direction of the animation that is the issue, but simply the fact that from SwiftUI's point of view there is only one way to get from 359 to 1.
However, the rotationEffect modifier will take any number as a parameter and will handle the conversion for you when drawing the needle, so there is no need to use modular arithmetic. Something like this seems to work in either direction
import SwiftUI
struct ClockView: View {
#State var nonModularAngle: Double = -10
#State var forward: Bool = true
let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
var body: some View {
ZStack {
Pointer()
.stroke(Color.blue, lineWidth: 3)
.rotationEffect(Angle.degrees(nonModularAngle))
//.animation(Animation.linear(duration: 1.0))
.animation(.default, value: nonModularAngle)
.frame(width: 300, height: 300)
}.onReceive(timer) { time in
self.nonModularAngle += forward ? +1 : -1
print(nonModularAngle)
}
Button("Reverse", action: { forward.toggle() })
}
}