gistfile1.txt

struct WithAnimationDelaysChallenge: View {
    @State private var showHouse: Bool = false
    @State private var showStar: Bool = false
    @State private var showGlobe: Bool = false
    @State private var showFlight: Bool = false
    
    @State private var borderFill: CGFloat = 0.0
    @State private var showButton: Bool = false
    
    var body: some View {
        VStack(spacing: 100) {
            HStack(spacing: 30) {
                Image(systemName: "house")
                    .opacity(showHouse ? 1 : 0)
                
                Image(systemName: "star")
                    .opacity(showStar ? 1 : 0)
                
                Image(systemName: "globe")
                    .opacity(showGlobe ? 1 : 0)
                
                Image(systemName: "airplane")
                    .opacity(showFlight ? 1 : 0)
            }
            .font(.largeTitle)
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .trim(from: 0, to: borderFill)
                    .stroke(style: StrokeStyle(lineWidth: 5))
                    .frame(width: 310, height: 100)
            )
            
            Button(action: {
                // Go to login page
            }, label: {
                Text("Log in")
                    .foregroundColor(.white)
                    .font(.title2)
                    .background(
                        Color.purple
                            .frame(width: 200, height: 55)
                            .cornerRadius(10)
                    )
                    .overlay {
                        RoundedRectangle(cornerRadius: 10)
                            .frame(width: 200, height: 55)
                            .foregroundColor(.white)
                            .offset(x: showButton ? 200 : 0)
                    }
            })
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 1)) {
                showHouse = true
            }
            withAnimation(.easeInOut(duration: 1).delay(1.2)) {
                showStar = true
            }
            withAnimation(.easeInOut(duration: 1).delay(2.4)) {
                showGlobe = true
            }
            withAnimation(.easeInOut(duration: 1).delay(3.6)) {
                showFlight = true
            }
            withAnimation(.easeInOut(duration: 2).delay(4.8)) {
                borderFill = 1.0
            }
            withAnimation(.linear(duration: 1).delay(7)) {
                showButton = true
            }
        }
    }
}