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

November 21, 2021

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()
            }
        }
    }
}

>Solution :

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()
        }
    }
}