SwiftUI中如何基于模型变化实现Path动画效果

核心思路 #

SwiftUI的动画依赖animatableData，但复杂数组无法直接作为动画驱动源。我们需要将PolygonPoint的可动画属性（比如圆角状态）转换为SwiftUI可识别的VectorArithmetic类型集合，同时确保路径重建时能平滑过渡状态。

步骤1：改造顶点结构，适配动画需求 #

布尔值无法直接触发动画，我们新增一个带过渡状态的结构体，用CGFloat值（0代表尖角，1代表圆角）间接控制圆角状态，实现平滑过渡：

// 带动画状态的多边形顶点
struct AnimatablePolygonPoint {
    let point: CGPoint
    var roundedProgress: CGFloat // 0=尖角，1=圆角
    let customCornerRadius: CGFloat?
    
    // 从原始PolygonPoint初始化
    init(from point: PolygonPoint) {
        self.point = point.point
        self.roundedProgress = point.isRounded ? 1 : 0
        self.customCornerRadius = point.customCornerRadius
    }
    
    // 转换回原始PolygonPoint，用于路径生成
    var toPolygonPoint: PolygonPoint {
        PolygonPoint(
            point: point,
            isRounded: roundedProgress > 0.5,
            customCornerRadius: customCornerRadius
        )
    }
}

步骤2：实现可动画的Shape结构体 #

创建遵循Shape协议的结构体，将AnimatablePolygonPoint数组的可动画属性平铺为一维数组，作为animatableData供SwiftUI计算动画插值：

struct RoundedPolygon: Shape {
    var animatablePoints: [AnimatablePolygonPoint]
    
    // 把每个顶点的roundedProgress提取为动画数据数组
    var animatableData: [CGFloat] {
        get { animatablePoints.map { $0.roundedProgress } }
        set {
            guard newValue.count == animatablePoints.count else { return }
            for index in animatablePoints.indices {
                animatablePoints[index].roundedProgress = newValue[index]
            }
        }
    }
    
    func path(in rect: CGRect) -> Path {
        // 转换为原始PolygonPoint数组，复用原有路径生成逻辑
        let polygonPoints = animatablePoints.map { $0.toPolygonPoint }
        let cgPath = generatePolygonPath(from: polygonPoints) // 替换为你原有的CGPath生成函数
        return Path(cgPath)
    }
}

步骤3：视图层管理状态并触发动画 #

用@State或@ObservedObject管理顶点数组，修改状态时用withAnimation包裹，即可触发平滑动画：

struct ContentView: View {
    @State private var animatablePoints: [AnimatablePolygonPoint] = [
        // 示例：初始化正方形四个顶点
        AnimatablePolygonPoint(from: PolygonPoint(point: CGPoint(x: 50, y: 50), isRounded: false)),
        AnimatablePolygonPoint(from: PolygonPoint(point: CGPoint(x: 250, y: 50), isRounded: false)),
        AnimatablePolygonPoint(from: PolygonPoint(point: CGPoint(x: 250, y: 250), isRounded: false)),
        AnimatablePolygonPoint(from: PolygonPoint(point: CGPoint(x: 50, y: 250), isRounded: false))
    ]
    
    var body: some View {
        VStack {
            RoundedPolygon(animatablePoints: animatablePoints)
                .stroke(.blue, lineWidth: 3)
                .frame(width: 300, height: 300)
            
            // 示例开关：控制第一个顶点的圆角状态
            Toggle("第一个角圆角", isOn: Binding(
                get: { animatablePoints[0].roundedProgress > 0.5 },
                set: { isOn in
                    withAnimation(.easeInOut(duration: 0.5)) {
                        animatablePoints[0].roundedProgress = isOn ? 1 : 0
                    }
                }
            ))
            .padding()
        }
    }
}

关键说明 #

1. 布尔值转过渡值：通过roundedProgress这个CGFloat中间状态，实现尖角到圆角的平滑过渡，解决布尔值无法动画的问题。
2. animatableData平铺：将数组中每个元素的可动画属性提取为一维数组，让SwiftUI能自动计算动画过程中的插值状态。
3. 复用原有逻辑：你的generatePolygonPath(from:)函数可以直接复用，只需完成AnimatablePolygonPoint到原始PolygonPoint的转换即可。

如果需要给圆角半径也添加动画，只需将customCornerRadius也加入animatableData的平铺数组，按照相同逻辑处理即可。

内容的提问来源于stack exchange，提问作者Duncan C