SwiftUI中如何为balance与bet文本变更添加动画？

首先要确保你的viewModel中balance和bet是@Published属性，这样视图能实时感知值的变化：

class YourViewModel: ObservableObject {
    @Published var balance: Int = 1000
    @Published var bet: Int = 0
    // 其他业务属性与方法
}

下面提供两种可行的实现方案：

方案一：在ViewModel中用withAnimation包裹值修改（推荐） #

直接在修改balance或bet的业务方法里用withAnimation包裹赋值逻辑，视图会自动应用动画效果：

// ViewModel内的示例方法
func adjustBalance(by amount: Int) {
    withAnimation(.easeInOut(duration: 0.3)) {
        balance += amount
    }
}

func setBet(amount: Int) {
    withAnimation(.easeInOut(duration: 0.3)) {
        bet = amount
    }
}

然后在视图中给对应Text添加动画修饰符，指定监听的数据源：

Text("Balance: $\(viewModel.balance)")
    .animation(.easeInOut, value: viewModel.balance)

Text("Bet: $\(viewModel.bet)")
    .animation(.easeInOut, value: viewModel.bet)

这种方式逻辑简洁，动画与业务逻辑绑定，视图层只需做数据绑定即可。

方案二：在视图层监听值变化触发动画 #

如果不想修改ViewModel，可以在视图内用onChange监听值变化，配合状态变量控制动画效果：

@State private var isBalanceAnimating = false
@State private var isBetAnimating = false

// Balance的Text组件
Text("Balance: $\(viewModel.balance)")
    .scaleEffect(isBalanceAnimating ? 1.3 : 1.0)
    .onChange(of: viewModel.balance) { _ in
        isBalanceAnimating = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
            isBalanceAnimating = false
        }
    }
    .animation(.easeInOut(duration: 0.3), value: isBalanceAnimating)

// Bet的Text组件
Text("Bet: $\(viewModel.bet)")
    .scaleEffect(isBetAnimating ? 1.3 : 1.0)
    .onChange(of: viewModel.bet) { _ in
        isBetAnimating = true
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
            isBetAnimating = false
        }
    }
    .animation(.easeInOut(duration: 0.3), value: isBetAnimating)

你之前尝试无效的原因 #

• .id("balance")是静态ID，不会随值变化，改成.id(viewModel.balance)才能让视图在值变更时重建，再配合外层withAnimation才能触发transition；
• iOS17+版本中，单独使用.animation(.easeInOut)必须指定value参数，否则动画不会生效；
• transition是针对视图出现/消失的动画，若只是想让文本内容变化时有动画，用animation(_:value:)配合缩放、透明度变化更适配场景。

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