How can I customise the Animation of an Angle change in SwiftUI - swiftui

Question

I have an app that shows a bunch of people who each have an origin and angle.
struct Location {
var centre:CGPoint
var facing:Angle
}
SwiftUI magically and automatically does a lot of the animation as they move from location A to location B
withAnimation {
person.location = newLocation
}
However - for the Angle (facing) property, I want the animation to go in the shortest route (bearing in mind that in the real world - angles wrap around).
e.g. Swift UI correctly animates when the angle changes 5 -> 10 (degrees)
5,6,7,8,9,10
but going from 2 to 358, it takes the long way around
SwiftUI does 2,3,4,5,6,7.......,357,358
where I would like it to do
2,1,0,359,358
how can I go about this?
thank you
update: I'm hoping for a solution which allows me to work with the animation system, perhaps using a new MyAngle struct which provides the animation steps directly, perhaps using some kind of animation modifier.
.easeInOut modifies the steps - is there an equivalent approach where I can create a .goTheRightWay animation?

Answer 1

Ok - Posting my own answer.
It works a bit like #Ben's answer - but moves the 'shadow angle' management to the rotation effect.
All you have to do is switch rotationEffect(angle:Angle) for shortRotationEffect(angle:Angle,id:UUID)
this looks like
#State private var rotationStorage = RotationStorage()
//and then in body
Image(systemName: "person.fill").resizable()
.frame(width: 50, height: 50)
.shortRotationEffect(self.person.angle,id:person.id,storage:rotationStorage)
.animation(.easeInOut)
the ShortRotationEffect uses the provided id to maintain a dictionary of previous angles. When you set a new angle, it figures out the equivalent angle which provides a short rotation and applies that with a normal rotationEffect(...)
Here it is:
class RotationStorage {
private var storage: [UUID: Angle] = [:]
fileprivate func setAngle(id:UUID,angle:Angle) {
storage[id] = angle
}
fileprivate func getAngle(_ id:UUID) -> Angle? {
return storage[id]
}
}
extension View {
/// Like RotationEffect - but when animated, the rotation moves in the shortest direction.
/// - Parameters:
/// - angle: new angle
/// - anchor: anchor point
/// - id: unique id for the item being displayed. This is used as a key to maintain the rotation history and figure out the right direction to move
func shortRotationEffect(_ angle: Angle,
anchor: UnitPoint = .center,
id: UUID,
storage:RotationStorage) -> some View {
modifier(ShortRotation(angle: angle,
anchor: anchor,
id: id,
storage:storage))
}
}
struct ShortRotation: ViewModifier {
var angle: Angle
var anchor: UnitPoint
var id: UUID
let storage:RotationStorage
func getAngle() -> Angle {
var newAngle = angle
if let lastAngle = storage.getAngle(id) {
let change: Double = (newAngle.degrees - lastAngle.degrees) %% 360.double
if change < 180 {
newAngle = lastAngle + Angle.init(degrees: change)
} else {
newAngle = lastAngle + Angle.init(degrees: change - 360)
}
}
storage.setAngle(id: id, angle: newAngle)
return newAngle
}
func body(content: Content) -> some View {
content
.rotationEffect(getAngle(), anchor: anchor)
}
}
this relies on my positive modulus function:
public extension Double {
/// Returns modulus, but forces it to be positive
/// - Parameters:
/// - left: number
/// - right: modulus
/// - Returns: positive modulus
static func %% (_ left: Double, _ right: Double) -> Double {
let truncatingRemainder = left.truncatingRemainder(dividingBy: right)
return truncatingRemainder >= 0 ? truncatingRemainder : truncatingRemainder+abs(right)
}
}

Answer 2

How about adjusting the newLocation value to keep within 180˚ of the start? Here's a function to check if the distance animated is greater than half way around and provide a new endpoint that satisfies it.
func adjustedEnd(from start: CGFloat, to target: CGFloat) -> CGFloat {
// Shift end to be greater than start
var end = target
while end < start { end += 360 }
// Mod the distance with 360, shifting by 180 to keep on the same side of a circle
return (end - start + 180).truncatingRemainder(dividingBy: 360) - 180 + start
}
Some sample test cases:
let startValues: [CGFloat] = [2, -10, 345, 365, 700]
let endValues: [CGFloat] = [2, 10, 180, 185, 350, -10, 715, -700]
for start in startValues {
print("From \(start):")
for end in endValues {
let adjusted = adjustedEnd(from: start, to: end)
print("\t\(end) \tbecomes \(adjusted);\tdistance \(abs(adjusted - start))")
}
}
prints the following:
From 2.0:
2.0 becomes 2.0; distance 0.0
10.0 becomes 10.0; distance 8.0
180.0 becomes 180.0; distance 178.0
185.0 becomes -175.0; distance 177.0
350.0 becomes -10.0; distance 12.0
-10.0 becomes -10.0; distance 12.0
715.0 becomes -5.0; distance 7.0
-700.0 becomes 20.0; distance 18.0
From -10.0:
2.0 becomes 2.0; distance 12.0
10.0 becomes 10.0; distance 20.0
180.0 becomes -180.0; distance 170.0
185.0 becomes -175.0; distance 165.0
350.0 becomes -10.0; distance 0.0
-10.0 becomes -10.0; distance 0.0
715.0 becomes -5.0; distance 5.0
-700.0 becomes 20.0; distance 30.0
From 345.0:
2.0 becomes 362.0; distance 17.0
10.0 becomes 370.0; distance 25.0
180.0 becomes 180.0; distance 165.0
185.0 becomes 185.0; distance 160.0
350.0 becomes 350.0; distance 5.0
-10.0 becomes 350.0; distance 5.0
715.0 becomes 355.0; distance 10.0
-700.0 becomes 380.0; distance 35.0
From 365.0:
2.0 becomes 362.0; distance 3.0
10.0 becomes 370.0; distance 5.0
180.0 becomes 540.0; distance 175.0
185.0 becomes 185.0; distance 180.0
350.0 becomes 350.0; distance 15.0
-10.0 becomes 350.0; distance 15.0
715.0 becomes 355.0; distance 10.0
-700.0 becomes 380.0; distance 15.0
From 700.0:
2.0 becomes 722.0; distance 22.0
10.0 becomes 730.0; distance 30.0
180.0 becomes 540.0; distance 160.0
185.0 becomes 545.0; distance 155.0
350.0 becomes 710.0; distance 10.0
-10.0 becomes 710.0; distance 10.0
715.0 becomes 715.0; distance 15.0
-700.0 becomes 740.0; distance 40.0
(Edited to account for negative ending values)
Edit: From your comment about keeping a second value around, what about setting Location.facing to the adjusted angle, and then adding to Location something like
var prettyFacing: Angle {
var facing = self.facing
while facing.degrees < 0 { facing += Angle(degrees: 360) }
while facing.degrees > 360 { facing -= Angle(degrees: 360) }
return facing
}

Answer 3

After trying both of the other options, we were still getting visual glitches (less common, but still there!).
Our Solution: Use UIKit for Animation
We've created a SPM package that adds a simple modifier, .uiRotationEffect(). This modifier wraps your View in a UIView, and uses UIView's .animate(...) function to get the correct behavior.
You can install the package here or you can just copy and paste the code here, it's not very long.
GIF of the working solution: