Swift链式动画结合UIView.transition的实现问题与Bug咨询

一、先解决你的显示时长失效Bug #

你的代码里用UIView.animate(withDuration: 6.0)来实现图片显示6秒，但这里有个致命问题：如果imageView的alpha本来就是1，这个动画块里没有任何属性变化，系统会直接跳过动画，立刻触发完成回调——这就是为什么设置6秒却只显示1秒左右的原因。

正确的做法是：用延迟执行来实现静态显示时长，而不是依赖无变化的动画。因为静态显示不需要动画，只是单纯等待一段时间再执行后续操作。

修复后的基础代码示例：

// 先显示第一张图片（假设images是URL数组）
loadImage(from: images[0]) { [weak self] image in
    guard let self = self, let image = image else { return }
    self.imageView.image = image
    self.imageView.alpha = 1
    
    // 等待6秒后切换到图片2
    DispatchQueue.main.asyncAfter(deadline: .now() + 6) {
        self.switchToImage(at: 1)
    }
}

// 封装切换图片的方法
func switchToImage(at index: Int) {
    loadImage(from: images[index]) { [weak self] image in
        guard let self = self, let image = image else { return }
        UIView.transition(with: self.imageView, duration: 1.0, options: .transitionCrossDissolve) {
            self.imageView.image = image
        } completion: { _ in
            // 图片2的后续逻辑：显示10秒 → 缩放 → 移动 → 切换到图片3
            DispatchQueue.main.asyncAfter(deadline: .now() + 10) {
                self.scaleImageThenMove()
            }
        }
    }
}

func scaleImageThenMove() {
    // 缩放动画（1秒）
    UIView.animate(withDuration: 1.0) {
        self.imageView.transform = CGAffineTransform(scaleX: 2, y: 2)
    } completion: { _ in
        // 移动动画（1秒）
        UIView.animate(withDuration: 1.0) {
            self.imageView.transform = self.imageView.transform.translatedBy(x: -100, y: 0) // 按需调整移动距离
        } completion: { _ in
            // 切换到图片3并显示12秒
            self.switchToImage(at: 2)
            DispatchQueue.main.asyncAfter(deadline: .now() + 12) {
                // 继续处理下一张...
            }
        }
    }
}

// 异步加载图片（替换同步的NSData(contentsOf:)，避免阻塞主线程）
func loadImage(from url: URL, completion: @escaping (UIImage?) -> Void) {
    URLSession.shared.dataTask(with: url) { data, _, error in
        guard let data = data, error == nil else {
            completion(nil)
            return
        }
        DispatchQueue.main.async {
            completion(UIImage(data: data))
        }
    }.resume()
}

二、优化回调嵌套的“地狱”问题 #

20+张图片的嵌套回调确实会让代码变得难以维护，这里推荐两种优雅的优化方案：

方案1：用「配置数组+递归函数」解耦逻辑

把每个图片的显示时长、动画序列都抽象成配置，然后用递归遍历配置数组，彻底告别嵌套：

1. 先定义配置结构体：

struct ImageAnimationTask {
    let imageURL: URL
    let displayDuration: TimeInterval // 静态显示时长
    let postDisplayAnimations: [(duration: TimeInterval, action: (UIImageView) -> Void)] // 显示后要执行的动画
}

2. 创建你的任务数组（按顺序添加20+个任务）：

let animationTasks: [ImageAnimationTask] = [
    ImageAnimationTask(
        imageURL: images[0],
        displayDuration: 6,
        postDisplayAnimations: [] // 图片1仅显示，无额外动画
    ),
    ImageAnimationTask(
        imageURL: images[1],
        displayDuration: 10,
        postDisplayAnimations: [
            (1.0, { $0.transform = CGAffineTransform(scaleX: 2, y: 2) }), // 缩放动画
            (1.0, { $0.transform = $0.transform.translatedBy(x: -100, y: 0) }) // 左移动画
        ]
    ),
    ImageAnimationTask(
        imageURL: images[2],
        displayDuration: 12,
        postDisplayAnimations: []
    ),
    // ... 剩下的图片任务
]

3. 实现递归执行的核心函数：

func runNextTask(at index: Int) {
    guard index < animationTasks.count else {
        print("所有动画任务完成")
        return
    }
    
    let currentTask = animationTasks[index]
    
    // 加载并切换到当前图片（第一张无过渡动画）
    let transitionDuration = index == 0 ? 0 : 1.0
    loadImage(from: currentTask.imageURL) { [weak self] image in
        guard let self = self, let image = image else {
            self?.runNextTask(at: index + 1)
            return
        }
        
        UIView.transition(with: self.imageView, duration: transitionDuration, options: .transitionCrossDissolve) {
            self.imageView.image = image
            self.imageView.transform = .identity // 重置形变
            self.imageView.alpha = 1
        } completion: { _ in
            // 等待静态显示时长
            DispatchQueue.main.asyncAfter(deadline: .now() + currentTask.displayDuration) {
                // 执行当前图片的后续动画序列
                self.runAnimations(in: currentTask.postDisplayAnimations, index: 0) {
                    // 动画完成后执行下一个任务
                    self.runNextTask(at: index + 1)
                }
            }
        }
    }
}

// 递归执行一组动画序列
func runAnimations(in animations: [(duration: TimeInterval, action: (UIImageView) -> Void)], index: Int, completion: @escaping () -> Void) {
    guard index < animations.count else {
        completion()
        return
    }
    
    let animation = animations[index]
    UIView.animate(withDuration: animation.duration) {
        animation.action(self.imageView)
    } completion: { _ in
        self.runAnimations(in: animations, index: index + 1, completion: completion)
    }
}

// 启动动画流程
runNextTask(at: 0)

这种方式的好处是：所有动画逻辑都集中在配置数组里，新增/修改图片动画只需要调整配置，代码可读性和可维护性大幅提升。

方案2：用Combine框架实现链式调用（iOS 13+）

如果你的项目支持iOS 13及以上，可以用Combine的Future和flatMap来把异步操作串起来，代码会更简洁：

import Combine

// 封装异步操作为Future
func switchToImage(with url: URL, transitionDuration: TimeInterval) -> Future<Void, Error> {
    return Future { promise in
        self.loadImage(from: url) { image in
            guard let image = image else {
                promise(.failure(NSError(domain: "ImageLoadError", code: -1, userInfo: nil)))
                return
            }
            UIView.transition(with: self.imageView, duration: transitionDuration, options: .transitionCrossDissolve) {
                self.imageView.image = image
                self.imageView.transform = .identity
            } completion: { _ in
                promise(.success(()))
            }
        }
    }
}

func wait(for duration: TimeInterval) -> Future<Void, Never> {
    return Future { promise in
        DispatchQueue.main.asyncAfter(deadline: .now() + duration) {
            promise(.success(()))
        }
    }
}

func runAnimation(_ duration: TimeInterval, action: @escaping () -> Void) -> Future<Void, Never> {
    return Future { promise in
        UIView.animate(withDuration: duration, animations: action) { _ in
            promise(.success(()))
        }
    }
}

// 链式执行示例（以前3张为例）
var cancellables = Set<AnyCancellable>()

switchToImage(with: images[0], transitionDuration: 0)
    .flatMap { _ in self.wait(for: 6) }
    .flatMap { _ in self.switchToImage(with: images[1], transitionDuration: 1) }
    .flatMap { _ in self.wait(for: 10) }
    .flatMap { _ in self.runAnimation(1) { self.imageView.transform = .init(scaleX: 2, y: 2) } }
    .flatMap { _ in self.runAnimation(1) { self.imageView.transform = self.imageView.transform.translatedBy(x: -100, y: 0) } }
    .flatMap { _ in self.switchToImage(with: images[2], transitionDuration: 1) }
    .flatMap { _ in self.wait(for: 12) }
    // 继续添加后续图片的链式调用...
    .sink(receiveCompletion: { _ in }, receiveValue: {})
    .store(in: &cancellables)

Combine的方式更适合喜欢函数式编程的开发者，链式调用逻辑清晰，也避免了嵌套。

三、额外注意事项 #

• 替换NSData(contentsOf:)：这个方法是同步加载，会阻塞主线程导致UI卡顿，一定要换成上面的异步加载方式。
• 内存管理：所有闭包里都要使用[weak self]避免循环引用，尤其是在递归和Combine的闭包中。
• 动画中断处理：如果需要支持中途停止动画，要记得取消DispatchQueue的延迟任务（可以用DispatchWorkItem），或者取消Combine的Cancellable。

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