SwiftUI动画问题：首次加载正常，点击刷新按钮后淡入动画失效

需求与当前问题 #

• 需求：屏幕首次加载时，三个Text视图按不同延迟时间淡入；点击刷新按钮获取新字符串后，重复相同的从无到有淡入动画
• 问题：首次加载动画符合预期，但点击刷新按钮后无法触发目标动画

现有代码 #

属性与方法 #

let colorArray = ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"]
@State private var text1 = " "
@State private var text2 = " "

let cityArray = ["Dallas", "Miami", "Nashville", "Chicago", "Los Angeles", "Seattle"]
@State private var text3 = " "

@State private var isAnimating = false

func resetValues() {
    isAnimating = false
    
    text1 = " "
    text2 = " "
    text3 = " "
}

func refreshItems() {
    resetValues()
    
    text1 = colorArray.randomElement()!
    text2 = colorArray.randomElement()!
    text3 = cityArray.randomElement()!
    
    if text1 == text2 {
        text2 = colorArray.randomElement()!
    }
    
    isAnimating = true
}

视图代码 #

NavigationStack {
    VStack(spacing: 20) {
        Text(text1)
            .opacity(isAnimating ? 1 : 0)
            .animation(.easeIn(duration: 1).delay(0.5), value: isAnimating)
        
        Text(text2)
            .opacity(isAnimating ? 1 : 0)
            .animation(.easeIn(duration: 1).delay(1.5), value: isAnimating)
        
        Text(text3)
            .opacity(isAnimating ? 1 : 0)
            .animation(.easeIn(duration: 1).delay(2.5), value: isAnimating)
    }
    .onAppear(perform: {
        refreshItems()
    })
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button {
                refreshItems()
            } label: {
                Image(systemName: "arrow.triangle.2.circlepath")
                    .font(.system(size: 25, weight: .bold))
            }
        }
    }
}

问题根源 #

SwiftUI的状态更新是批量合并的，在refreshItems函数中，同步执行的resetValues()（将isAnimating设为false）和后续的isAnimating = true会被合并成最终的isAnimating = true，SwiftUI无法捕捉到从false到true的完整过渡过程，因此不会触发opacity的动画。

解决方案 #

方案1：异步拆分状态更新 #

通过异步延迟让SwiftUI先渲染重置后的状态（透明、空文本），再触发动画：

func refreshItems() {
    resetValues()
    
    // 让SwiftUI先完成重置状态的渲染
    DispatchQueue.main.async {
        self.text1 = self.colorArray.randomElement()!
        self.text2 = self.colorArray.randomElement()!
        self.text3 = self.cityArray.randomElement()!
        
        if self.text1 == self.text2 {
            self.text2 = self.colorArray.randomElement()!
        }
        
        // 用withAnimation明确触发动画
        withAnimation {
            self.isAnimating = true
        }
    }
}

方案2：使用计数器触发动画 #

用一个计数器替代isAnimating，每次刷新让计数器递增，动画依赖计数器的值，确保每次刷新都能触发状态变化：

// 替换原有的isAnimating
@State private var animationTrigger = 0

func resetValues() {
    text1 = ""
    text2 = ""
    text3 = ""
}

func refreshItems() {
    resetValues()
    
    DispatchQueue.main.async {
        self.text1 = self.colorArray.randomElement()!
        self.text2 = self.colorArray.randomElement()!
        self.text3 = self.cityArray.randomElement()!
        
        if self.text1 == self.text2 {
            self.text2 = self.colorArray.randomElement()!
        }
        
        // 递增计数器触发动画
        self.animationTrigger += 1
    }
}

对应的视图修改为：

Text(text1)
    .opacity(animationTrigger > 0 ? 1 : 0)
    .animation(.easeIn(duration: 1).delay(0.5), value: animationTrigger)

Text(text2)
    .opacity(animationTrigger > 0 ? 1 : 0)
    .animation(.easeIn(duration: 1).delay(1.5), value: animationTrigger)

Text(text3)
    .opacity(animationTrigger > 0 ? 1 : 0)
    .animation(.easeIn(duration: 1).delay(2.5), value: animationTrigger)

额外优化 #

• 将重置文本从空格" "改为空字符串""，避免不必要的布局占位
• 用withAnimation包裹动画触发逻辑，让动画行为更明确可控

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