SDWebImageSwiftUI加载图片淡入效果失效的解决咨询

你当前代码里的.transition(.fade(duration: 0.5))没生效，主要是LazyVGrid的视图复用机制，以及WebImage默认加载逻辑没正确触发过渡动画导致的，不需要在init或AppDelegate做特殊配置，直接修改View代码即可，以下是可行方案：

方案一：添加占位图触发过渡 #

给WebImage设置占位视图，让过渡在占位图和加载完成的图片之间触发：

import SDWebImageSwiftUI

struct ExploreCategoryImageView: View {
    
    let category: StoreMainCategory
    
    var body: some View {
        ZStack (alignment:.leading){
            WebImage(url: URL(string:"\(category.image)"))
                .resizable()
                .scaledToFill()
                // 占位图作为过渡的起始状态
                .placeholder {
                    Color.gray.opacity(0.2)
                }
                .transition(.fade(duration: 0.5))
        }
        .frame(height:125)
        .contentShape(Rectangle())
        .background (Color.white)
        .cornerRadius(7.5)
        .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
        .padding(.horizontal,7.5)
    }
}

方案二：手动控制加载状态与动画 #

如果方案一仍不生效，可通过状态变量手动控制图片加载完成后的淡入动画：

import SDWebImageSwiftUI

struct ExploreCategoryImageView: View {
    
    let category: StoreMainCategory
    @State private var isImageLoaded = false
    
    var body: some View {
        ZStack (alignment:.leading){
            if isImageLoaded {
                WebImage(url: URL(string:"\(category.image)"))
                    .resizable()
                    .scaledToFill()
            } else {
                Color.gray.opacity(0.2)
            }
        }
        .frame(height:125)
        .contentShape(Rectangle())
        .background (Color.white)
        .cornerRadius(7.5)
        .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
        .padding(.horizontal,7.5)
        .onAppear {
            SDWebImageManager.shared.loadImage(with: URL(string:"\(category.image)"), options: [], progress: nil) { image, _, _, _, _, _ in
                guard image != nil else { return }
                withAnimation(.easeInOut(duration: 0.5)) {
                    isImageLoaded = true
                }
            }
        }
    }
}

额外注意事项 #

• 若开启SDWebImage内存缓存，已缓存的图片会直接显示，不会触发过渡。测试时可添加options: [.refreshCached]强制重新加载，正式环境不建议长期使用。
• 确保每个LazyVGrid单元格的category.image是唯一标识，避免视图复用导致的动画异常。

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