Hello!

I have the following code in SwiftUI:

struct OpeningView: View {
    @State private var hasFadedIn = false

    var body: some View {
        ZStack {
            if hasFadedIn {
                Text("hello")
            }
            Rectangle().frame(width: 50, height: 50).position(y: 5)
        }
        .ignoresSafeArea()
        .animation(.easeInOut(duration: 5).delay(5), value: hasFadedIn)
        .onAppear { hasFadedIn.toggle() }
    }
}

This fades in a piece of text over a duration with a delay.

However, the rectangle does not have this applied. Thus, it shows up immediately.

I know I could move the rectangle to the condition if I really wanted to make both the rectangle and the text animate. I am really just purely interested in one particular behavior of SwiftUI — the location of the animation modifier:

.animation(.easeInOut(duration: 5).delay(5), value: hasFadedIn)

This is applied on the ZStack. Doesn't that mean it should be applied to everything in it, especially since hasFadedIn is toggled when the ZStack appears?

It's probably something really basic, but I haven't played with animation in SwiftUI in a while. Thanks! :)

The reason why I am asking this is because I wanted to originally apply the animation to just the text, and show that in code. I wanted to put the modifier directly under my text. I just feel like it's not as clear when it's applied on the ZStack. It makes it look like it's animating the whole ZStack, rather than just parts of it.

@joe has a question about animation...

I am interested in [snip]— the location of the animation modifier:

Here's a way to visualize your question. Grab two sheets of paper. On one, write hasFadedIn = false at the top. On the other write hasFadedIn = true.

On the first one, just draw a rectangle. On the other draw a rectangle with the word hello inside it.

Now convince yourself that your view only has two states, namely hasFadedIn is true or false. Interestingly, when your variable changes from true to false, SwiftUI immediately redraws the view. It's immediate.

What you perceive as animation is SwiftUI handing the before and after views to an animation routine that interpolates the inbetween frames over the duration that you specify. While the animation routine shows the frames onscreen, behind the scene the new view has already been drawn. Depending upon the device, the animation routine might draw 15 inbetween frames, or 15 hundred inbetween frames. You don't know, and you don't care. SwiftUI will calculate an appropriate number of inbetween frames it needs for smooth animation.

So you wonder why the .animation() modifier doesn't affect everything in the ZStack? It does! It's just that the rectangle is always present. When the OpeningView struct is created, the rectangle is present from the start.