如何在 SwiftUI 中自定义角度变化的动画

Question

我有一个应用程序，它显示了一群人，每个人都有一个起源和角度。

struct Location {
    var centre:CGPoint
    var facing:Angle
}

当它们从位置 A 移动到位置 B 时，SwiftUI 会神奇地自动执行许多动画

withAnimation {
    person.location = newLocation
}

但是 - 对于角度（面对）属性，我希望动画以最短的路线进行（请记住，在现实世界中 - 角度环绕）。

例如当角度变化 5 -> 10（度）时，Swift UI 会正确动画

5,6,7,8,9,10

但是从 2 到 358，需要很长的路要走

SwiftUI 做了 2,3,4,5,6,7.......,357,358

我希望它在哪里做

2,1,0,359,358

我该怎么办？

谢谢

更新：我希望有一个解决方案，可以让我使用动画系统，也许使用一个新的 MyAngle 结构，它直接提供动画步骤，也许使用某种动画修改器。 .easeInOut 修改了步骤 - 是否有等效的方法可以创建 .goTheRightWay 动画？

Answer 1

好的 - 发布我自己的答案。 它有点像@Ben 的回答 - 但将“阴影角度”管理移至旋转效果。

您只需将rotationEffect(angle:Angle) 切换为shortRotationEffect(angle:Angle,id:UUID)

这看起来像

        Image(systemName: "person.fill").resizable()
            .frame(width: 50, height: 50)
            .shortRotationEffect(self.person.angle,id:person.id)
            .animation(.easeInOut)

ShortRotationEffect 使用提供的 id 来维护先前角度的字典。当您设置一个新角度时，它会计算出提供短旋转的等效角度并将其应用于普通rotationEffect(...)

这里是：

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) -> some View {
        modifier(ShortRotation(angle: angle,anchor:anchor, id:id))
    }
}


struct ShortRotation: ViewModifier {
    static var storage:[UUID:Angle] = [:]
    
    var angle:Angle
    var anchor:UnitPoint
    var id:UUID
    
func getAngle() -> Angle {
    var newAngle = angle
    
    if let lastAngle = ShortRotation.storage[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)
        }
    }
    
    ShortRotation.storage[id] = newAngle

    return newAngle
}
    
    
    func body(content: Content) -> some View {
        content
            .rotationEffect(getAngle(),anchor: anchor)
    }
}

这取决于我的正模函数：

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

如何调整 newLocation 值以保持在开始的 180˚ 以内？这是一个检查动画距离是否大于一半并提供满足它的新端点的函数。

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
}

一些示例测试用例：

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))")
    }
}

打印以下内容：

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

（已编辑以考虑负结束值）

编辑：根据您关于保留第二个值的评论，如何将 Location.facing 设置为调整后的角度，然后添加到 Location 类似

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

在尝试了其他两个选项后，我们仍然遇到视觉故障（不太常见，但仍然存在！）。

我们的解决方案：使用 UIKit 制作动画

我们创建了一个 SPM 包，它添加了一个简单的修饰符 .uiRotationEffect()。此修饰符将您的View 包装在UIView 中，并使用UIView 的.animate(...) 函数来获得正确的行为。

你可以安装包here或者直接复制粘贴代码here，不会很长。

工作解决方案的 GIF：