Swift中如何依次动画UIView数组？两种尝试遇阻求优雅方案

嘿，这个需求太常见了！咱们先聊聊你之前两种尝试遇到的问题，再给几个靠谱又优雅的解决方案～

先说说你之前尝试的瓶颈 #

第一种：递归闭包的问题 #

你写的递归闭包之所以报错Variable used within itself，是因为你在闭包定义的过程中就直接引用了它自己——这时候闭包还没完全初始化完成呢，编译器肯定不答应。另外views.removeFirst()会直接修改原数组，如果原数组是let声明的，还会触发另一个错误，而且这种修改原数组的方式也不够优雅。

第二种：array map的问题 #

map是同步遍历，会立刻把所有动画代码都执行一遍，相当于把所有视图的动画同时加到了系统的动画队列里，自然做不到“前一个完成再启动下一个”的效果，完全不符合你的需求。

优雅的解决方案 #

方案1：改进版递归函数（简单直观） #

把闭包改成普通函数，避免自引用问题，同时用数组切片传递剩余视图，不修改原数组：

func animateViewsSequentially(_ views: [UIView]) {
    guard let firstView = views.first else { return }
    
    UIView.animate(withDuration: 0.5, animations: {
        firstView.frame.origin.y -= 30.0
        firstView.alpha = 1.0
    }, completion: { [weak self] finished in
        guard finished else { return }
        // 传递去掉第一个元素的新数组，继续递归
        self?.animateViewsSequentially(Array(views.dropFirst()))
    })
}

// 调用方式
animateViewsSequentially(stackView.arrangedSubviews)

这个方案代码简洁，逻辑清晰，适合大多数简单场景，而且用weak self避免了循环引用的风险。

方案2：Combine链式调用（函数式优雅） #

如果你的项目已经引入了Combine框架，这种函数式的写法会非常优雅，把每个动画包装成异步任务，再串联起来：

import Combine

// 记得在类里声明这个变量，用来保存订阅
var animationCancellables = Set<AnyCancellable>()

func animateWithCombine() {
    // 把每个视图的动画包装成Future（异步任务）
    let animationTasks = stackView.arrangedSubviews.map { view -> Future<Void, Never> in
        Future { promise in
            UIView.animate(withDuration: 0.5, animations: {
                view.frame.origin.y -= 30.0
                view.alpha = 1.0
            }, completion: { finished in
                promise(.success(()))
            })
        }
    }
    
    // 把所有异步任务串联起来，前一个完成再执行下一个
    animationTasks.reduce(Just(())) { previousTask, nextTask in
        previousTask.flatMap { nextTask }
    }
    .sink(receiveCompletion: { _ in
        print("所有动画完成！")
    })
    .store(in: &animationCancellables)
}

// 调用方式
animateWithCombine()

这种方式扩展性很强，如果后续要给动画加额外逻辑（比如错误处理、中间回调），会非常方便。

方案3：索引迭代式（易调试） #

用一个索引变量追踪当前动画的视图，逻辑更直观，适合需要调试动画流程的场景：

func animateWithIndex() {
    let views = stackView.arrangedSubviews
    var currentIndex = 0
    
    func animateNext() {
        guard currentIndex < views.count else { return }
        let currentView = views[currentIndex]
        
        UIView.animate(withDuration: 0.5, animations: {
            currentView.frame.origin.y -= 30.0
            currentView.alpha = 1.0
        }, completion: { [weak self] finished in
            guard finished else { return }
            currentIndex += 1
            self?.animateNext()
        })
    }
    
    // 启动第一个动画
    animateNext()
}

// 调用方式
animateWithIndex()

这个方案把递归改成了迭代式的调用，逻辑一目了然，新手也能快速理解。

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