如何使用 SDWebImageSwiftUI 加载时使图像淡入

Question

我在 LazyVGrid 中使用以下代码使用 SDWebImageSwiftUI 从 firebase 存储桶加载图像，它们会显示，但它们不会很好地淡入并突然显示：

import SDWebImageSwiftUI

struct ExploreCategoryImageView: View {
    
    let category: StoreMainCategory
    
    var body: some View {
        ZStack (alignment:.leading){
            WebImage(url: URL(string:"\(category.image)"))
                .resizable()
                .transition(.fade(duration: 0.5))
                .scaledToFill()
        }
        .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)
    }
} 

我有最新版本的 SDWebImageSwiftUI 2.2.6 和 SDWebImage 5.19.0，但我想知道，我是否需要在应用程序的 init() 或 AppDelegate 中做一些特殊的事情才能使图像在加载时很好地淡入？

Answer 1

根据 WebImage 的

documentation

，可以向图像添加

.onSuccess

回调，该回调在图像加载成功时调用。因此，可以使用它来更新控制不透明度的状态变量：

@State private var imageLoaded = false

WebImage(url: URL(string:"\(category.image)"))
    .resizable()
    .scaledToFill()
    .opacity(imageLoaded ? 1 : 0)
    .animation(.easeInOut(duration: 0.5), value: imageLoaded)
    .onSuccess { _ in
        imageLoaded = true
    }

API 还允许您设置

indicator

或

placeholder

，因此您也可以尝试尝试这些，以防它们提供另一种提供淡入淡出效果的方式。

如果您使用上述不透明度方法，那么显示占位符的另一种方法是在

ZStack

的下层显示图像。但是，如果您不知道正在加载的图像的纵横比，那么最好在显示加载的图像的同时隐藏占位符，否则部分占位符图像可能会从下面“突出”加载的图像。再说一遍，如果您要缩放以填充，那么假设加载的图像不包含任何透明部分，那么这应该不是问题。