I am creating a compass application in swiftUI. It works, but when I add animation to move the compass, the behavior below appears:
For example, when it goes from the 5° orientation to 350° it decides to do a complete turn. It is not the natural behavior for a compass.
My ContentView code:
import SwiftUI
import CoreLocation
struct ContentView: View {
var locationManager = CLLocationManager()
@ObservedObject var location: LocationProvider = LocationProvider()
@State var angle: CGFloat = 0
var body: some View {
GeometryReader { geometry in
VStack {
Rectangle()
.frame(width: 10, height: 30)
.background(Color(.red))
.foregroundColor(Color(.clear))
Spacer()
Text(String(Double(self.location.currentHeading).stringWithoutZeroFraction) + "°")
.font(.system(size: 40))
.foregroundColor(Color(.black))
Spacer()
}
.frame(width: 300, height: 300, alignment: .center)
.border(Color(.black))
.onReceive(self.location.heading) { heading in
withAnimation(.easeInOut(duration: 0.2)) {
self.angle = heading
}
}
.modifier(RotationEffect(angle: self.angle))
}.background(Color(.white))
}
}
struct RotationEffect: GeometryEffect {
var angle: CGFloat
var animatableData: CGFloat {
get { angle }
set { angle = newValue }
}
func effectValue(size: CGSize) -> ProjectionTransform {
return ProjectionTransform(
CGAffineTransform(translationX: -150, y: -150)
.concatenating(CGAffineTransform(rotationAngle: -CGFloat(angle.degreesToRadians)))
.concatenating(CGAffineTransform(translationX: 150, y: 150))
)
}
}
public extension CGFloat {
var degreesToRadians: CGFloat { return self * .pi / 180 }
var radiansToDegrees: CGFloat { return self * 180 / .pi }
}
public extension Double {
var degreesToRadians: Double { return Double(CGFloat(self).degreesToRadians) }
var radiansToDegrees: Double { return Double(CGFloat(self).radiansToDegrees) }
var stringWithoutZeroFraction: String {
return truncatingRemainder(dividingBy: 1) == 0 ? String(format: "%.0f", self) : String(self)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Here, I'm using the CGAffineTransform
to rotate the compass with a matrix animation to solve the problem. I thought this would work because when I used this method in UIKit, the problem did not exist.
My LocationProvider code:
import SwiftUI
import CoreLocation
import Combine
public class LocationProvider: NSObject, CLLocationManagerDelegate, ObservableObject {
private let locationManager: CLLocationManager
public let heading = PassthroughSubject<CGFloat, Never>()
@Published var currentHeading: CGFloat {
willSet {
heading.send(newValue)
}
}
public override init() {
currentHeading = 0
locationManager = CLLocationManager()
super.init()
locationManager.delegate = self
locationManager.desiredAccuracy = kCLLocationAccuracyBest
locationManager.startUpdatingHeading()
locationManager.requestWhenInUseAuthorization()
}
public func updateHeading() {
locationManager.startUpdatingHeading()
}
public func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
DispatchQueue.main.async {
self.currentHeading = CGFloat(newHeading.trueHeading)
}
}
}
How can I resolve this problem?
Updated: This will now work when rotating multiple times. Thanks to krjw for pointing out the issue.
There's no reason you need your angle
property to stay within 360°. Instead of assigning heading
to angle
directly, calculate the difference and add it.
Here's a working example. Outside your body
property in ContentView, add the following functions:
// If you ever need the current value of angle clamped to 0..<360,
// use clampAngle(self.angle)
func clampAngle(_ angle: CGFloat) -> CGFloat {
var angle = angle
while angle < 0 {
angle += 360
}
return angle.truncatingRemainder(dividingBy: 360)
}
// Calculates the difference between heading and angle
func angleDiff(to heading: CGFloat) -> CGFloat {
return (clampAngle(heading - self.angle) + 180).truncatingRemainder(dividingBy: 360) - 180
}
Then change the line that assigns angle
to
self.angle += self.angleDiff(to: heading)
The answer of John M. based on the comments works, however when going into the positive direction, over 360 degrees, the animation fails again.
The simple solution would be to look for a change of -300 and smaller and then add 360 degrees. Theres is probably a better solution, but until then I will share mine:
.onReceive(self.location.heading) { heading in
var diff = (heading - self.angle + 180).truncatingRemainder(dividingBy: 360) - 180
if diff < -300 {
diff += 360
}
withAnimation {
self.angle += diff
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With