SwiftUI如何在条件满足时为Text背景色切换添加动画效果

• 需求目标：当满足numberOfTaps = 3的条件时，修改Text组件的背景色，目前已经通过在.background属性中写入条件判断实现了基础功能
• 新增诉求：为背景色的切换过程添加基础缓动动画，使用.easeInOut这类基础效果即可，无需复杂动效

原有实现代码 #

import SwiftUI

struct ContentView: View {
    @State private var numberOfTaps = 0
    
    var body: some View {
        VStack {
            Button("Up") {
                numberOfTaps += 1
            }
            
            Text("\(numberOfTaps)")
                .padding()
                .background(numberOfTaps == 3 ? Color.blue : Color.green)
            
            Button("Down") {
                numberOfTaps -= 1
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

当前界面效果 #

两种写法都能实现需求，按需选择即可：

• 方案1：用withAnimation包裹状态变更逻辑
  把所有修改numberOfTaps的代码放在withAnimation(.easeInOut)闭包中，状态变更驱动的UI变化会自动套用对应动画，核心修改如下：

  Button("Up") {
      // 自定义动画时长，单位为秒，示例设为0.25秒
      withAnimation(.easeInOut(duration: 0.25)) {
          numberOfTaps += 1
      }
  }
  
  Button("Down") {
      withAnimation(.easeInOut(duration: 0.25)) {
          numberOfTaps -= 1
      }
  }
  

  适合需要精准控制哪次状态修改触发动画的场景。

• 方案2：给组件绑定动画（更推荐）
  无需修改按钮的点击逻辑，直接在Text的修饰符链上添加.animation，指定监听numberOfTaps的变化，值变更时自动对UI改动应用动画，修改后的Text代码如下：

  Text("\(numberOfTaps)")
      .padding()
      .background(numberOfTaps == 3 ? Color.blue : Color.green)
      // 注意：iOS 15+ 要求animation必须绑定value参数，避免动画异常
      .animation(.easeInOut(duration: 0.25), value: numberOfTaps)
  

  代码更简洁，只要numberOfTaps变化触发背景色改动，就会自动执行过渡动画，不需要逐个修改触发状态的逻辑。

两种写法的动画效果完全一致，duration参数可以自行调整，数值越大动画播放速度越慢。

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