SwiftUI中如何自定义角度变更的最短路径动画？

嘿，这个问题我太熟了！SwiftUI原生的Angle动画确实没考虑角度的环形特性，默认只会按数值的线性变化来走，导致从2°到358°这种情况会绕一大圈。下面给你两个适配SwiftUI动画系统的实用方案，都是我实际项目里用过的：

这个方案最彻底——我们自己实现一个支持最短路径动画的角度类型，让它直接融入SwiftUI的动画系统。核心是让自定义类型遵守VectorArithmetic协议，告诉SwiftUI怎么正确计算角度插值。

import SwiftUI

struct MyAngle: VectorArithmetic, Equatable {
    var degrees: Double
    
    // 从原生Angle初始化，自动归一到0-360°
    init(_ angle: Angle) {
        self.degrees = angle.degrees.truncatingRemainder(dividingBy: 360)
        if degrees < 0 { degrees += 360 }
    }
    
    // 转换回原生Angle，方便在SwiftUI视图里使用
    var angle: Angle {
        Angle(degrees: degrees)
    }
    
    // MARK: - VectorArithmetic协议实现
    static var zero: MyAngle { MyAngle(Angle(degrees: 0)) }
    
    mutating func scale(by rhs: Double) {
        degrees *= rhs
        normalize()
    }
    
    static func -= (lhs: inout MyAngle, rhs: MyAngle) {
        lhs.degrees -= rhs.degrees
        lhs.normalize()
    }
    
    static func += (lhs: inout MyAngle, rhs: MyAngle) {
        lhs.degrees += rhs.degrees
        lhs.normalize()
    }
    
    static func - (lhs: MyAngle, rhs: MyAngle) -> MyAngle {
        var result = lhs
        result -= rhs
        return result
    }
    
    static func + (lhs: MyAngle, rhs: MyAngle) -> MyAngle {
        var result = lhs
        result += rhs
        return result
    }
    
    // 核心：归一角度，确保始终在0-360°范围内
    private mutating func normalize() {
        degrees = degrees.truncatingRemainder(dividingBy: 360)
        if degrees < 0 { degrees += 360 }
    }
    
    // 关键方法：告诉SwiftUI怎么计算两个角度的插值（走最短路径）
    static func interpolate(from start: MyAngle, to end: MyAngle, fraction: Double) -> MyAngle {
        var difference = end.degrees - start.degrees
        // 调整差值到-180°到180°之间，强制走最短路径
        if difference > 180 {
            difference -= 360
        } else if difference < -180 {
            difference += 360
        }
        let interpolatedDegrees = start.degrees + difference * fraction
        return MyAngle(Angle(degrees: interpolatedDegrees))
    }
}

// 扩展View，让MyAngle可以直接用在rotationEffect里
extension View {
    func rotationEffect(_ angle: MyAngle) -> some View {
        self.rotationEffect(angle.angle)
    }
}

用法 #

把你原来Location结构体里的facing类型从Angle改成MyAngle，然后正常用withAnimation赋值就行：

struct Location {
    var centre: CGPoint
    var facing: MyAngle // 替换成自定义类型
}

struct PersonView: View {
    @State var personLocation: Location
    
    var body: some View {
        Image(systemName: "person")
            .rotationEffect(personLocation.facing)
            .position(personLocation.centre)
            .onTapGesture {
                withAnimation(.easeInOut(duration: 0.5)) {
                    // 从2°转到358°，自动走最短路径
                    personLocation.facing = MyAngle(Angle(degrees: 358))
                }
            }
    }
}

如果不想改动现有的Location结构体，这个方案更灵活——我们自定义一个动画，专门处理角度的最短路径插值，封装成ViewModifier后直接用就行。

import SwiftUI

// 自定义动画Modifier
struct ShortestPathAngleAnimation: ViewModifier {
    let baseAnimation: Animation
    let targetAngle: Angle
    
    func body(content: Content) -> some View {
        content.animation(ShortestPathAngle(base: baseAnimation, targetAngle: targetAngle))
    }
}

// 核心：自定义Animation，处理角度的最短路径插值
struct ShortestPathAngle: Animation {
    let base: Animation
    let targetAngle: Angle
    
    func animate<V>(value: V, initialValue: V, closure: (V) -> Void) where V : VectorArithmetic {
        // 只处理Angle类型的动画，其他类型用原生动画
        guard let startAngle = initialValue as? Angle, let endAngle = value as? Angle else {
            base.animate(value: value, initialValue: initialValue, closure: closure)
            return
        }
        
        // 先把角度归一到0-360°
        var startDegrees = startAngle.degrees.truncatingRemainder(dividingBy: 360)
        var endDegrees = endAngle.degrees.truncatingRemainder(dividingBy: 360)
        if startDegrees < 0 { startDegrees += 360 }
        if endDegrees < 0 { endDegrees += 360 }
        
        // 计算最短路径的差值
        var difference = endDegrees - startDegrees
        if difference > 180 {
            difference -= 360
        } else if difference < -180 {
            difference += 360
        }
        
        // 用基础动画驱动插值，生成正确的中间角度
        base.animate(value: 0.0, initialValue: 0.0) { fraction in
            let interpolatedDegrees = startDegrees + difference * fraction
            let interpolatedAngle = Angle(degrees: interpolatedDegrees)
            closure(interpolatedAngle as! V)
        }
    }
}

// 扩展View，方便调用
extension View {
    func animation(_ animation: Animation, shortestPathTo targetAngle: Angle) -> some View {
        self.modifier(ShortestPathAngleAnimation(baseAnimation: animation, targetAngle: targetAngle))
    }
    
    // 给你想要的.goTheRightWay()命名
    func goTheRightWay(_ animation: Animation = .easeInOut, targetAngle: Angle) -> some View {
        self.animation(animation, shortestPathTo: targetAngle)
    }
}

用法 #

不用修改原有Location，在触发动画时指定自定义动画即可：

struct Location {
    var centre: CGPoint
    var facing: Angle // 保留原生类型
}

struct PersonView: View {
    @State var personLocation: Location
    
    var body: some View {
        Image(systemName: "person")
            .rotationEffect(personLocation.facing)
            .position(personLocation.centre)
            .onTapGesture {
                let targetAngle = Angle(degrees: 358)
                withAnimation {
                    personLocation.facing = targetAngle
                }
                // 或者直接用自定义modifier
                // self.goTheRightWay(.easeInOut(duration: 0.5), targetAngle: targetAngle)
            }
    }
}

方案对比 #

• 方案一适合全局都需要最短路径角度动画的项目，一劳永逸，不用每次动画都额外处理；
• 方案二更适合局部使用的场景，不需要修改原有数据结构，灵活度更高。

内容的提问来源于stack exchange，提问作者Confused Vorlon