SwiftUI气泡动画问题：点击后气泡消失且字母停留

我要做一款面向儿童的字母漂浮气泡小游戏，已经用文本叠加气泡图实现了字母上浮效果，但碰到两个问题：

• 点击气泡时，没法实现气泡带动画消失、同时字母停在当前位置
• 希望字母停留1秒后添加缩放动画

原代码：

struct ExtractedView: View {
    @State var BubbleAnimate = false
    @State var AlphbetArray: [String] = ["A", "B","C","D","E","F","G"]
    @State var randomNumber = Int.random(in: 0...6)
    
    var body: some View {
        Button {
            BubbleAnimate = true
            print("Hi")
        } label: {
            Text("Test Me")
        }
        .offset(x:100)

        Text(AlphbetArray[randomNumber])
                    .font(.system(size: 120))
                    .fontWeight(.bold)
                    .foregroundColor(.purple)
                    .padding()
                    .overlay {
                        
                        Image("bubble").resizable().frame(width: 130.0, height: 130.0).scaledToFit()
                    }
                    .animation(.linear(duration: 5).repeatForever(autoreverses: false), value: BubbleAnimate)
                .offset(y:BubbleAnimate ? -300 : 300)
                .onTapGesture {
                    print("Hello")
                    BubbleAnimate.toggle()

                    // I tried toggle but it won't work probably 
                }
    }
}

当前效果：

修改后的实现代码 #

struct ExtractedView: View {
    @State var isBubbleVisible = true // 控制气泡显示/隐藏
    @State var isLetterFloating = false // 控制字母上浮
    @State var isLetterScaling = false // 控制字母缩放
    @State var alphabetArray: [String] = ["A", "B","C","D","E","F","G"]
    @State var randomNumber = Int.random(in: 0...6)
    
    var body: some View {
        Button {
            isLetterFloating = true
            print("开始上浮")
        } label: {
            Text("开始游戏")
        }
        .offset(x:100)

        Text(alphabetArray[randomNumber])
            .font(.system(size: 120))
            .fontWeight(.bold)
            .foregroundColor(.purple)
            .padding()
            // 气泡单独控制显示和消失动画
            .overlay(
                Group {
                    if isBubbleVisible {
                        Image("bubble")
                            .resizable()
                            .frame(width: 130.0, height: 130.0)
                            .scaledToFit()
                            .transition(.opacity.combined(with: .scale)) // 气泡消失的过渡动画
                    }
                }
            )
            // 字母上浮动画
            .offset(y: isLetterFloating ? -300 : 300)
            .animation(.linear(duration: 5).repeatForever(autoreverses: false), value: isLetterFloating)
            // 字母缩放动画
            .scaleEffect(isLetterScaling ? 1.5 : 1.0)
            .animation(.easeInOut(duration: 0.5), value: isLetterScaling)
            .onTapGesture {
                print("点击气泡")
                // 气泡带动画消失
                withAnimation {
                    isBubbleVisible = false
                }
                // 1秒后触发字母缩放
                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                    withAnimation {
                        isLetterScaling = true
                    }
                }
            }
    }
}

关键改动说明 #

• 拆分状态变量：把原有的单一状态拆成三个独立变量，分别控制气泡显示、字母上浮、字母缩放，避免状态冲突导致的动画异常
• 气泡消失动画：用条件渲染+transition实现气泡消失时的透明+缩放过渡效果，点击时通过withAnimation触发动画
• 延迟缩放逻辑：用DispatchQueue.main.asyncAfter延迟1秒触发字母缩放状态，配合scaleEffect实现指定时间后的缩放动画
• 独立动画绑定：每个动画单独绑定对应的状态变量，确保各动画互不干扰，字母上浮过程中点击气泡不会打断上浮状态

内容的提问来源于stack exchange，提问作者Eng.Maher