How do you automatically start an animation that depends on a button?

Question

I have created a text animation here. Currently this animation is triggered by the button. How do I redesign the code so that it starts automatically and is not executed by the button. The button should be deleted completely at the end.

struct ContentView: View {
    @State var shortString = true

    var body: some View {
        VStack {
            Text(shortString ? "This is short." : "This is considerably longer.").font(.title)
                .animation(.easeInOut(duration:1.0))
            Button(action: {self.shortString.toggle()}) {
                Text("Toggle").padding()
            }
        }
    }
}

It might depend on your real project views layout. Look for example at this https://stackoverflow.com/a/64566746/12299030. — Asperi, Nov 21 '21 at 18:22

score 0 · Accepted Answer · answered Nov 21 '21 at 18:18

You can use onAppear to trigger the animation as soon as the view appears:

struct ContentView: View {
    @State var shortString = true

    var body: some View {
        VStack {
            Text(shortString ? "This is short." : "This is considerably longer.").font(.title)
                .animation(.easeInOut(duration:1.0), value: shortString)
        }.onAppear {
            shortString.toggle()
        }
    }
}

How do you automatically start an animation that depends on a button?

1 Answers1