UISegmentedControl控制图片切换时添加Curl Down转场动画的实现问题

核心错误原因 #

你现有的代码存在两个核心问题导致转场效果不生效：

• 执行顺序倒置：转场动画代码写在了图片选择逻辑之前，动画闭包内引用的image变量未定义，实际图片赋值操作在动画结束后才执行，系统无法捕获到图片变更来渲染转场效果
• 图片赋值未放入动画闭包：UIView转场动画只会对animations闭包内的视图属性变更生效，你当前的图片切换逻辑完全在动画闭包之外，自然不会关联转场效果

修正后的完整代码 #

class images: UIViewController {

    @IBOutlet var segmentCtrl1: UISegmentedControl!
    @IBOutlet var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // 首次加载默认显示第一个分段对应的图片
        imageView.image = UIImage(named: "footsteps.jpg")
    }

    @IBAction func segmentCtrlChange(_ sender: UISegmentedControl) {
        // 先确定要切换的目标图片
        var targetImage: UIImage?
        switch sender.selectedSegmentIndex {
        case 0:
            targetImage = UIImage(named: "footsteps.jpg")
        case 1:
            targetImage = UIImage(named: "birds.jpg")
        case 2:
            targetImage = UIImage(named: "apples.jpg")
        default:
            targetImage = UIImage(named: "space.jpg")
        }
        
        // 在转场动画闭包内执行图片赋值
        UIView.transition(with: imageView, duration: 0.3, options: [.transitionCurlDown], animations: {
            self.imageView.image = targetImage
        })
    }
}

可选优化建议 #

• 原代码中对UIImage(named:)的返回值做了强制解包，若图片文件缺失会直接触发崩溃，建议增加判空逻辑，或者提前校验工程内的图片资源是否存在
• 如果需要根据不同操作切换转场方向，只需要修改options参数中的转场类型即可，比如向上翻页对应.transitionCurlUp

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