如何为SDWebImage加载的图片添加淡入动画效果？

嘿，这个需求很常见，SDWebImage提供了非常方便的回调机制来处理图片加载完成后的操作，我来给你一步步拆解怎么实现淡入效果：

步骤1：设置图片初始状态 #

首先，我们需要把picImg的初始透明度设为0，这样当图片加载完成后，淡入的动画才会有明显的视觉效果：

picImg.alpha = 0

步骤2：利用SDWebImage的完成回调添加动画 #

SDWebImage的sd_setImage(with:completed:)方法提供了加载完成的回调闭包，我们可以在这个闭包里执行淡入动画。把你原来的代码修改成这样：

if let photoUrlString = post?.photoUrl, let photoUrl = URL(string: photoUrlString) {
    // 初始隐藏图片
    picImg.alpha = 0
    
    picImg.sd_setImage(with: photoUrl) { [weak self] image, error, cacheType, url in
        guard let self = self else { return }
        // 只有当图片加载成功时才执行淡入动画
        if let _ = image {
            UIView.animate(withDuration: 0.3) {
                self.picImg.alpha = 1
            }
        } else {
            // 如果加载失败，可以设置默认占位图或者直接显示（这里根据你的需求调整）
            self.picImg.alpha = 1
            self.picImg.image = UIImage(named: "placeholder_image")
        }
    }
}

额外说明：使用SDWebImage内置过渡动画 #

如果你不想自己写动画代码，SDWebImage还提供了内置的交叉溶解过渡选项，直接在sd_setImage的options参数里设置即可：

if let photoUrlString = post?.photoUrl, let photoUrl = URL(string: photoUrlString) {
    picImg.sd_setImage(
        with: photoUrl,
        options: .transitionCrossDissolve(0.3)
    )
}

这个方式更简洁，适合不需要自定义动画逻辑的场景。

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