I've been struggling for days to make my app have a "splash screen" of sorts, but can't quite implement it in the way I need.
The first time the app is opened, I want it to display a cycle through different instructions. For example, the page should first say "welcome", then after 2 seconds, change to "thank you for downloading this app," then 2 seconds later fade to my main content view. After that, I have animated bubbles that appear in certain locations above UI buttons to tell the user what happens if you click them.
So far, I have that working fine. To do it, I have a ZStack of multiple views, and after a delay, the opacity of the old view is set to 100%, so the view below appears. The main code can be found below, with repetitions of the functions removed for simplicity. The homescreen view is the main view with the UI buttons mentioned above. The setupscreen views contain the text instructions to the user.
The code looks like this:
ZStack {
homescreen()
setupScreen6()
.onAppear(perform: animateSplash6)
.opacity(settings.endSplash6 ? 0 : 1)
.opacity(settings.animate6 ? 1 : 0)
setupScreen5()
.onAppear(perform: animateSplash5)
.opacity(settings.endSplash5 ? 0 : 1)
.opacity(settings.animate5 ? 1 : 0)
setupScreen4()
.onAppear(perform: animateSplash4)
.opacity(settings.endSplash4 ? 0 : 1)
setupScreen3()
.onAppear(perform: animateSplash3)
.opacity(settings.endSplash3 ? 0 : 1)
setupScreen2()
.onAppear(perform: animateSplash2)
.opacity(settings.endSplash2 ? 0 : 1)
setupScreen()
.onAppear(perform: animateSplash)
//.onAppear(perform: endanimateSplash)
.opacity(settings.endSplash ? 0 : 1)
}.environmentObject(settings)
}
func animateSplash() {
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
withAnimation(Animation.easeOut(duration: 1)) {
settings.animate.toggle()
}
withAnimation(Animation.easeOut(duration: 1)) {
settings.endSplash.toggle()
}
}
}
However, in the app, I have a setting that the user can click to "reset" the app. When the user clicks that button I switch tabs back to the tab in which the above resides, then reset all of the animateSplash and endSplash variables back to false. This results in the setupscreen() view being displayed (as expected), but it never fades out again to reveal the views below it in the ZStack.
I'm realising my way of implementing this is wrong, and there has to be a simpler way.
any help would be appreciated!