如何在同一个Label中通过淡入淡出效果显示多个值并修复仅显最后项问题

问题核心原因 #

• for循环内的闭包存在变量捕获问题：Swift中for循环的迭代变量在闭包中是引用捕获，所有定时器闭包最终访问的都是循环结束后的最后一个i值，所以只会显示最后一条引语。
• 你同时为每一条引语都创建了一个重复执行的定时器，多个定时器同时触发会互相覆盖文本、打乱动画时序。
• 动画和定时器的时序没有匹配：没有等待前一条引语的淡入+显示+淡出全流程完成就切换下一条，逻辑不符合需求。

修复方案 #

第一步：定义必要的成员属性 #

// 跟踪当前播放的引语下标
private var currentQuoteIndex = 0
// 淡入淡出动画时长，可根据需求调整
private let fadeAnimationDuration: TimeInterval = 0.3
// 每条引语淡入后停留的显示时长，可调整
private let quoteDisplayDuration: TimeInterval = 2.0

第二步：替换原有for循环逻辑 #

// 先重置初始状态
currentQuoteIndex = 0
quoteLabel.alpha = 0

guard let quotes = splashModel?.quotations, !quotes.isEmpty else { return }

// 先加载第一条引语
showNextQuote()

// 启动单一定时器按周期切换，间隔时长 = 淡出时间+停留时间+淡入时间
Timer.scheduledTimer(withTimeInterval: fadeAnimationDuration * 2 + quoteDisplayDuration, repeats: true) { [weak self] timer in
    guard let self = self else { 
        timer.invalidate() 
        return 
    }
    // 下标循环，到最后一条后回到第一条实现无限轮播
    self.currentQuoteIndex = (self.currentQuoteIndex + 1) % quotes.count
    self.showNextQuote()
}

第三步：封装引语切换的动画方法 #

private func showNextQuote() {
    guard let quotes = splashModel?.quotations, currentQuoteIndex < quotes.count else { return }
    let currentQuote = quotes[currentQuoteIndex]
    
    // 先淡出旧文本
    quoteLabel.fadeOut(duration: fadeAnimationDuration) { [weak self] finished in
        guard let self = self, finished else { return }
        // 切换为新引语
        self.quoteLabel.text = currentQuote
        // 淡入新文本
        self.quoteLabel.fadeIn(duration: self.fadeAnimationDuration)
    }
}

如果你的fadeIn、fadeOut扩展已经自带默认时长，可以去掉代码里的duration参数，和你已有的实现对齐即可。页面销毁时记得调用定时器的invalidate()方法避免内存泄漏。

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