Question 67648 in IOS Swift Question posted in
The official documentation can be found here.

SwiftUI: How to delete a view after a certain time – Ios swift

I have this animation code:

struct CheckmarkAnimation: View {
    @State private var isAnimating = false

    var body: some View {
        ZStack {
            Circle()
                .trim(to: isAnimating ? 1:0)
                .stroke(.green, lineWidth: 3)
                .frame(width: 100, height: 100)
                .animation(.easeInOut(duration: 1), value: isAnimating)
            
            Image(systemName: "checkmark")
                .foregroundColor(.green)
                .font(.largeTitle)
                .scaleEffect(isAnimating ? 1.5 : 0)
                .animation(.spring(response: 0.5, dampingFraction: 0.4).delay(1), value: isAnimating)
        }
        .onAppear {
            isAnimating.toggle()
        }
    }
}

I would like this view to disappear after the scaling effect on the checkmark ends. How do I do this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    .scaleEffect() on ZStack is an elegant solution.

    struct CheckmarkAnimation: View {
    @State private var isAnimating = false
    @State private var color = Color.green
    
    var body: some View {
        ZStack {
            Circle()
                .trim(to: isAnimating ? 1:0)
                .stroke(color, lineWidth: 3)
                .frame(width: 100, height: 100)
                .animation(.easeInOut(duration: 1), value: isAnimating)
            
            Image(systemName: "checkmark")
                .foregroundColor(color)
                .font(.largeTitle)
                .scaleEffect(isAnimating ? 1.5 : 0)
                .animation(.spring(response: 0.5, dampingFraction: 0.4).delay(1), value: isAnimating)
                
        }
        .scaleEffect(isAnimating ? 0 : 1)
        .animation(.linear(duration: 0.01).delay(2), value: isAnimating)
        .onAppear {
            isAnimating.toggle()
        }
    }
}

    This code works and makes the view disappear^^


  2. 0

    Here are 2 ways to do it:

    Change drawing color to .clear after 2 seconds

    Here’s a way to have it disappear (turn invisible but still take up space). Change the drawing color to .clear after 2 seconds:

    struct CheckmarkAnimation: View {
    @State private var isAnimating = false
    @State private var color = Color.green
    
    var body: some View {
        ZStack {
            Circle()
                .trim(to: isAnimating ? 1:0)
                .stroke(color, lineWidth: 3)
                .frame(width: 100, height: 100)
                .animation(.easeInOut(duration: 1), value: isAnimating)
            
            Image(systemName: "checkmark")
                .foregroundColor(color)
                .font(.largeTitle)
                .scaleEffect(isAnimating ? 1.5 : 0.001)
                .animation(.spring(response: 0.5, dampingFraction: 0.4).delay(1), value: isAnimating)
                
        }
        .onAppear {
            isAnimating.toggle()
            withAnimation(.linear(duration: 0.01).delay(2)) {
                color = .clear
            }
        }
    }
}

    Use .scaleEffect() on ZStack

    Insert this scale animation before the .onAppear:

    .scaleEffect(isAnimating ? 0.001 : 1)
.animation(.linear(duration: 0.01).delay(2), value: isAnimating)
.onAppear {
    isAnimating.toggle()
}

    Note: Use 0.001 instead of 0 in scaleEffect to avoid

    ignoring singular matrix: ProjectionTransform

    messages in the console.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search