SwiftUI中如何同时实现文本移动动画与内容修改？

问题分析 #

你当前的代码在点击按钮时同时修改了动画状态isTextAnimated和文本内容titleLabel，SwiftUI会将这两个状态变更合并为一次视图更新，导致文本内容直接切换，无法保留平滑的移动动画过渡。

解决方案 #

以下几种方法可以实现文本平滑移动的同时完成内容修改，适配不同的视觉需求：

方法1：动画完成后切换文本 #

通过withAnimation触发偏移动画，在动画结束后更新文本内容，确保移动动画不受内容切换影响：

struct ContentView: View {
    @State var titleLabel = "This is basic text"
    @State var isTextAnimated: Bool = false
    
    var body: some View {
        VStack {
            Text(titleLabel)
                .offset(y: isTextAnimated ? 300 : 0)
            
            Button {
                // 触发偏移动画
                withAnimation(.linear) {
                    isTextAnimated.toggle()
                }
                // 动画时长可根据实际调整，这里设为0.5秒
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                    titleLabel = isTextAnimated ? "New text appeared" : "This is basic text"
                }
            } label: {
                Text("Press")
            }
        }
        .padding()
    }
}

方法2：新旧文本交替动画 #

用ZStack叠加两个文本，分别控制它们的偏移和透明度，实现原文本移出、新文本移入的平滑过渡：

struct ContentView: View {
    @State var isTextAnimated: Bool = false
    let originalText = "This is basic text"
    let newText = "New text appeared"
    
    var body: some View {
        VStack {
            ZStack {
                Text(originalText)
                    .offset(y: isTextAnimated ? 300 : 0)
                    .opacity(isTextAnimated ? 0 : 1)
                Text(newText)
                    .offset(y: isTextAnimated ? 0 : -300)
                    .opacity(isTextAnimated ? 1 : 0)
            }
            // 仅针对isTextAnimated的变化应用动画
            .animation(.linear, value: isTextAnimated)
            
            Button {
                isTextAnimated.toggle()
            } label: {
                Text("Press")
            }
        }
        .padding()
    }
}

方法3：同步切换内容与动画 #

如果希望文本移动的同时直接切换内容，只需将动画绑定到isTextAnimated状态，确保偏移量的变化有平滑动画：

struct ContentView: View {
    @State var titleLabel = "This is basic text"
    @State var isTextAnimated: Bool = false
    
    var body: some View {
        VStack {
            Text(titleLabel)
                .offset(y: isTextAnimated ? 300 : 0)
                // 仅对offset属性应用动画
                .animation(.linear, value: isTextAnimated)
            
            Button {
                isTextAnimated.toggle()
                titleLabel = isTextAnimated ? "New text appeared" : "This is basic text"
            } label: {
                Text("Press")
            }
        }
        .padding()
    }
}

场景适配 #

• 方法1适合需要先完成移动动画，再更新文本内容的场景
• 方法2适合追求新旧文本交替过渡的流畅视觉效果
• 方法3适合内容切换与移动动画同步进行的需求

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