SwiftUI中Shape数值变化动画失效问题排查与解决

问题背景 #

使用Int类型变量count更新自定义Shape，已实现animatableData、添加animation修饰符甚至显式使用transition，但Shape始终无法产生平滑动画效果。开发环境为Xcode 14.1 (14B47b)，SwiftUI macOS。

原代码如下：

struct ContentView: View {
    
    @State private var count: Int = 1
    var body: some View {
        VStack(spacing: 0.0) {

            RectangleShape(count: count)
                .fill()
            
            Button("update") {
                if (count >= 4) { count = 1 }
                else { count += 1 }
            }
            .padding()
            
        }
        .padding(.horizontal)
        .padding(.top)
        .transition(AnyTransition.opacity)
        .animation(.default, value: count)
 
    }
}

struct RectangleShape: Shape {
    
    var count: Int

    var animatableData: Int {
        get { count }
        set { count = newValue }
    }
    
    func path(in rect: CGRect) -> Path {

        return Path { path in

            switch count {
            case 2:
                path.move(to: CGPoint(x: rect.minX, y: rect.minY))
                path.addRect(CGRect(x: rect.minX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
                path.addRect(CGRect(x: rect.midX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
            case 3:
                path.move(to: CGPoint(x: rect.minX, y: rect.minY))
                path.addRect(CGRect(x: rect.minX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
                path.addRect(CGRect(x: rect.midX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
                path.addRect(CGRect(x: rect.midX, y: rect.midY, width: rect.width/2.0, height: rect.height/2.0))
            case 4:
                path.move(to: CGPoint(x: rect.minX, y: rect.minY))
                path.addRect(CGRect(x: rect.minX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
                path.addRect(CGRect(x: rect.midX, y: rect.midY, width: rect.width/2.0, height: rect.height/2.0))
                path.addRect(CGRect(x: rect.minX, y: rect.midY, width: rect.width/2.0, height: rect.height/2.0))
                path.addRect(CGRect(x: rect.midX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
            default:
                path.move(to: CGPoint(x: rect.minX, y: rect.minY))
                path.addRect(CGRect(x: rect.minX, y: rect.minY, width: rect.width/2.0, height: rect.height/2.0))
            }

        }
    }
        
}

问题原因 #

1. 离散类型无法插值：animatableData使用Int类型，属于离散数值，SwiftUI动画系统无法在不同Int值之间生成连续过渡帧，只能直接跳变。
2. 路径生成无过渡逻辑：通过switch count直接生成完全不同的路径，没有针对中间状态计算过渡路径的逻辑，动画过程中无法生成平滑过渡的帧。
3. transition误用：transition用于视图的插入/移除动画，对Shape自身的路径变化动画无效。

解决方法 #

1. 将animatableData改为连续数值类型（如CGFloat），让动画系统能插值计算中间值。
2. 基于连续数值，在path方法中动态计算每个过渡帧的路径，实现平滑的形状变化。
3. 调整动画修饰符的作用范围，确保动画直接作用于Shape的变化。

修改后的代码 #

struct ContentView: View {
    
    @State private var count: CGFloat = 1
    var body: some View {
        VStack(spacing: 0.0) {
            RectangleShape(count: count)
                .fill()
                .animation(.easeInOut(duration: 0.5), value: count) // 直接给Shape绑定动画
            
            Button("update") {
                withAnimation { // 用withAnimation包裹状态变更，明确触发动画
                    if count >= 4 {
                        count = 1
                    } else {
                        count += 1
                    }
                }
            }
            .padding()
        }
        .padding(.horizontal)
        .padding(.top)
    }
}

struct RectangleShape: Shape {
    var count: CGFloat

    // 改用CGFloat作为animatableData，支持连续插值
    var animatableData: CGFloat {
        get { count }
        set { count = newValue }
    }
    
    func path(in rect: CGRect) -> Path {
        let cellWidth = rect.width / 2
        let cellHeight = rect.height / 2
        
        return Path { path in
            // 始终显示第一个基础矩形
            path.addRect(CGRect(x: rect.minX, y: rect.minY, width: cellWidth, height: cellHeight))
            
            // 根据count的连续值动态生成过渡路径
            // 第二个矩形：count从1到2时，宽度从0扩展到完整尺寸
            if count >= 1 {
                let displayProgress = min(count - 1, 1.0)
                path.addRect(CGRect(x: rect.midX, y: rect.minY, width: cellWidth * displayProgress, height: cellHeight))
            }
            
            // 第三个矩形：count从2到3时，宽度从0扩展到完整尺寸
            if count >= 2 {
                let displayProgress = min(count - 2, 1.0)
                path.addRect(CGRect(x: rect.midX, y: rect.midY, width: cellWidth * displayProgress, height: cellHeight))
            }
            
            // 第四个矩形：count从3到4时，宽度从0扩展到完整尺寸
            if count >= 3 {
                let displayProgress = min(count - 3, 1.0)
                path.addRect(CGRect(x: rect.minX, y: rect.midY, width: cellWidth * displayProgress, height: cellHeight))
            }
        }
    }
}

关键改动说明 #

• 将count改为CGFloat类型，配合animatableData实现连续数值插值。
• 在path方法中，根据count的连续值计算每个矩形的显示进度，通过宽度渐变实现平滑过渡动画。
• 用withAnimation包裹状态变更，同时给Shape直接添加动画修饰符，确保动画作用到路径变化上。
• 移除了无用的transition修饰符。

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