MatchedGeometryEffect兼容本地图片却不兼容URL图片的原因及解决方法

MatchedGeometryEffect的核心是记录动画前后视图的布局信息（位置、尺寸、形状），以此生成平滑过渡动画。本地资源图片能正常工作，是因为：

• 本地图片是同步加载，视图渲染时就有确定的尺寸和内容，MatchedGeometryEffect能准确捕获初始布局状态。

而网络图片（这里用的KFImage）失效的核心原因：

• KFImage是异步加载，初始渲染时图片还未下载完成，此时视图布局基于占位状态（默认空白或自定义占位图）的尺寸。当图片加载完成后，视图会重新布局，尺寸/内容发生变化，但MatchedGeometryEffect已经记录了初始的错误布局信息，导致动画时无法匹配前后状态，出现过渡异常。
• 额外问题：代码中点击移除profile时直接调用removeAll，会直接销毁原视图，也可能导致MatchedGeometryEffect无法正确追踪视图状态。

针对网络图片适配MatchedGeometryEffect，核心思路是确保动画触发时，图片已加载完成，且前后视图的布局状态一致，以下是具体实现方案：

方案1：等待图片加载完成后启用动画 #

利用Kingfisher的回调标记图片加载状态，仅在加载完成后应用MatchedGeometryEffect：

import SwiftUI
import Kingfisher

struct ZStackView: View {
    
    @StateObject private var VM = ViewModel()
    @Namespace private var nsspace
    @State private var selectedProfile: Profile?
    // 记录每个profile的图片加载状态
    @State private var imageLoadedMap: [UUID: Bool] = [:]

    var body: some View {
        ZStack {
            ForEach(Array(zip(VM.profiles.indices, VM.profiles)), id: \.1) { index, profile in
                if Int(index) == 0 {
                    VStack {
                        ScrollView {
                            Text(profile.name)
                                .font(.largeTitle)
                            
                            if selectedProfile == nil {
                                KFImage(profile.urls.first)
                                    .resizable()
                                    .scaledToFill()
                                    .frame(width: 300, height: 400)
                                    .clipped()
                                    // 图片加载完成后标记状态
                                    .onSuccess { _ in
                                        imageLoadedMap[profile.id] = true
                                    }
                                    // 仅加载完成后应用MatchedGeometryEffect
                                    .if(imageLoadedMap[profile.id] == true) { view in
                                        view.matchedGeometryEffect(id: profile.id, in: nsspace)
                                    }
                                    .onTapGesture {
                                        withAnimation(.easeInOut) {
                                            VM.profiles.removeAll(where: { $0.id == profile.id})
                                        }
                                    }
                            }
                            
                            Text(profile.prompt)
                                .font(.largeTitle)
                                .onTapGesture {
                                    // 确保图片加载完成后再触发动画
                                    guard imageLoadedMap[profile.id] == true else { return }
                                    withAnimation {
                                        selectedProfile = profile
                                    }
                                }
                        }
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .zIndex(1)
                    .transition(AnyTransition.asymmetric(insertion: .scale, removal: .move(edge: .leading)))
                }
            }
            
            if let profile = selectedProfile {
                VStack {
                    KFImage(profile.urls.first)
                        .resizable()
                        .scaledToFill()
                        .matchedGeometryEffect(id: profile.id, in: nsspace)
                        .frame(width: 300, height: 400)
                        .clipped()
                }
                .frame(maxWidth: .infinity,  maxHeight: .infinity)
                .background(Color.blue)
                .onTapGesture {
                    withAnimation {
                        selectedProfile = nil
                    }
                }
                .zIndex(2)
            }
        }
    }
}

// 扩展View实现条件修饰符
extension View {
    @ViewBuilder
    func `if`<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

方案2：固定容器尺寸+预加载图片 #

给KFImage设置和最终视图一致的占位图尺寸，避免布局跳动，同时提前预加载图片：

// 在ViewModel中添加预加载方法
class ViewModel: ObservableObject {
    @Published var profiles: [Profile] = []
    
    func preloadImage(for profile: Profile) {
        guard let url = profile.urls.first else { return }
        KingfisherManager.shared.retrieveImage(with: url) { _ in
            // 预加载完成，确保图片已缓存
        }
    }
}

struct ZStackView: View {
    @StateObject private var VM = ViewModel()
    @Namespace private var nsspace
    @State private var selectedProfile: Profile?

    var body: some View {
        ZStack {
            ForEach(Array(zip(VM.profiles.indices, VM.profiles)), id: \.1) { index, profile in
                if Int(index) == 0 {
                    VStack {
                        ScrollView {
                            Text(profile.name)
                                .font(.largeTitle)
                            
                            if selectedProfile == nil {
                                KFImage(profile.urls.first)
                                    .resizable()
                                    .scaledToFill()
                                    // 设置与最终视图一致的占位图
                                    .placeholder {
                                        Color.gray.frame(width: 300, height: 400)
                                    }
                                    .matchedGeometryEffect(id: profile.id, in: nsspace)
                                    .frame(width: 300, height: 400)
                                    .clipped()
                                    .onTapGesture {
                                        withAnimation(.easeInOut) {
                                            VM.profiles.removeAll(where: { $0.id == profile.id})
                                        }
                                    }
                            }
                            
                            Text(profile.prompt)
                                .font(.largeTitle)
                                .onTapGesture {
                                    withAnimation {
                                        selectedProfile = profile
                                    }
                                }
                        }
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .zIndex(1)
                    .transition(AnyTransition.asymmetric(insertion: .scale, removal: .move(edge: .leading)))
                    .onAppear {
                        VM.preloadImage(for: profile)
                    }
                }
            }
            
            if let profile = selectedProfile {
                VStack {
                    KFImage(profile.urls.first)
                        .resizable()
                        .scaledToFill()
                        .matchedGeometryEffect(id: profile.id, in: nsspace)
                        .frame(width: 300, height: 400)
                        .clipped()
                }
                .frame(maxWidth: .infinity,  maxHeight: .infinity)
                .background(Color.blue)
                .onTapGesture {
                    withAnimation {
                        selectedProfile = nil
                    }
                }
                .zIndex(2)
            }
        }
    }
}

方案3：使用SwiftUI原生AsyncImage（iOS 15+） #

如果项目支持iOS 15及以上，用AsyncImage结合状态判断，确保图片加载完成后再应用动画：

// 替换KFImage为AsyncImage
AsyncImage(url: profile.urls.first) { phase in
    switch phase {
    case .success(let image):
        image.resizable()
            .scaledToFill()
            .matchedGeometryEffect(id: profile.id, in: nsspace)
    case .failure, .empty:
        Color.gray.frame(width: 300, height: 400) // 占位图
    }
}
.frame(width: 300, height: 400)
.clipped()

• 避免直接调用removeAll销毁原视图，可改用隐藏（如opacity）的方式，让MatchedGeometryEffect完整追踪视图状态。
• 确保profile.id是唯一且稳定的标识符，这是MatchedGeometryEffect匹配视图的核心依据。

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