Bizarre animation issue in SwiftUI

0
1
Bizarre animation issue in SwiftUI


I encountered a very bizarre animation issue in SwiftUI. I am using a custom animation with transition + asymmetric + removal ViewModifier. As shown in the pictures, when I add an HStack element inside the body of FoldUpModifier, the animation works perfectly. However, once this seemingly meaningless HStack element is removed, the animation breaks—the view instantly disappears, and the animation slowly collapses into nothingness. Could any senior iOS development engineers or Apple internal developers explain what is causing this?

import SwiftUI

struct NoticeMessageBarView: View {
    var messages: [String]?
    @State private var show: Bool = true

    var body: some View {
        if let msgs = messages, show {
            HStack {
                VerticalMessageCarousel(
                    messages: msgs,
                    scrollInterval: 3.5
                )
                Spacer()
                Button {
                    withAnimation(.easeOut(duration: 3)) {
                        show.toggle()
                    }
                } label: {
                    Image(systemName: "xmark")
                }
            }
            .padding(.horizontal, 16)
            .background(.tipsBackground)
            .foregroundStyle(.tipsForeground)
            .lineLimit(1)
            .clipShape(RoundedRectangle(cornerRadius: 8))
            .transition(
                .asymmetric(
                    insertion: .opacity,
                    removal: .modifier(
                        active: FoldUpModifier(progress: 1),
                        identity: FoldUpModifier(progress: 0)
                    )
                )
            )
        }

    }
}

struct FoldUpModifier: ViewModifier {
    var progress: CGFloat

    func body(content: Content) -> some View {

        HStack {}

        content
            .frame(height: (1 - progress) * 40, alignment: .top)
            .clipped()
    }
}

#Preview {
    NoticeMessageBarView(messages: [
        "🎉 Welcome!",
        "🌟 Hello!",
    ])
    Text("Other block")
    Spacer()
}

Bizarre animation issue in SwiftUI