如何在单个UIView中实现两张图片的淡入淡出切换？

嘿，我刚好也踩过类似的坑，用单个UIImageView实现图片淡入淡出切换其实有非常简洁靠谱的方法，咱们来一步步解决你的问题：

核心问题分析 #

你之前的方案出问题，本质是因为同一个UIView的image属性变更和alpha动画如果时机没把握好，会互相干扰：

• 方案1里你可能在旧图淡出的同时就替换了image，导致旧图的淡出动画被直接打断，只能看到新图的淡入；
• 方案2应该是没正确包裹动画代码，直接同步设置了新image，所以完全没有过渡效果。

推荐方案1：用系统自带的过渡动画（最简洁） #

苹果提供了专门用于视图内容过渡的API，完美适配单View的图片切换，自动帮你做交叉溶解的淡入淡出：

// 假设你的图片容器是这个UIImageView
let yourImageView = UIImageView()
let newTargetImage = UIImage(named: "your_new_image")!

// 执行交叉溶解过渡动画，duration可根据需求调整
UIView.transition(with: yourImageView,
                  duration: 0.5,
                  options: [.transitionCrossDissolve],
                  animations: {
    yourImageView.image = newTargetImage
}, completion: nil)

这个方法的好处是：系统会自动处理旧图淡出、新图淡入的同步过渡，不需要手动控制alpha，代码少还不容易出错，完全符合你“单个UIView”的需求。

推荐方案2：手动分步控制动画（适合自定义需求） #

如果你需要更灵活的动画节奏（比如先完全淡出旧图，再淡入新图），可以把动画拆成两步，放在completion回调里执行：

let yourImageView = UIImageView()
let newTargetImage = UIImage(named: "your_new_image")!

// 第一步：旧图淡出
UIView.animate(withDuration: 0.3, animations: {
    yourImageView.alpha = 0.0
}) { _ in
    // 淡出完成后，替换图片（此时视图是透明的，用户看不到替换过程）
    yourImageView.image = newTargetImage
    // 第二步：新图淡入
    UIView.animate(withDuration: 0.3) {
        yourImageView.alpha = 1.0
    }
}

这个方法要注意：必须把替换图片的操作放在旧图淡出的completion里，而不是和淡出动画并行执行，否则会像你之前的方案1一样，旧图还没淡出就被替换，导致看不到淡出效果。

为什么你的之前尝试会失败？ #

• 方案1：你可能没把图片替换放在过渡动画的闭包里，或者在淡出旧图的同时就同步设置了新image，导致旧图的动画被中断；
• 方案2：应该是直接调用了yourImageView.image = newImage，没有用UIView.animate包裹过渡逻辑，所以直接显示了新图。

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