Hello!
I feel like I really should know how to do this, but perhaps I am just sleep deprived and have been coding too much. 😅
I have an array of strings and I'm trying to animate each one as a Text view on the screen, one at a time.
I am making something that:
- Iterates through the array
- Creates a
Text view that animates in (with opacity and a slight position change)
- Waits for a little while so you can read the text
- Fades out with an opacity
I did just that with this code:
Group {
let dialogue = [
"string1",
"string2",
"string3",
"string4",
"string5",
"string6"
]
ForEach(0..<dialogue.count, id: \.self) { index in
Text("\(dialogue[index])")
.frame(width: geometryProxy.size.width * 0.25, height: geometryProxy.size.width * 0.25, alignment: .center)
.minimumScaleFactor(0.15)
.multilineTextAlignment(.center)
.foregroundStyle(.white)
.font(.system(size: 25, weight: .medium, design: .serif))
.background(.cyan.opacity(0.5))
.opacity(hasPresentedDialogue ? 1 : 0)
.offset(y: hasPresentedDialogue ? 0 : geometryProxy.size.height * 0.35 - geometryProxy.size.height * 0.375)
.position(x: geometryProxy.size.width * 0.65, y: geometryProxy.size.height * 0.35)
.animation(.easeInOut(duration: 0.75).delay(5 * Double(index)), value: hasPresentedDialogue)
}
.onAppear { withAnimation { hasPresentedDialogue.toggle() } }
}
Well... almost just that. I cannot figure out how to get the views to fade out before the next one comes. Right now, they're all just piling up on top of each other, which is obviously not ideal.
How can I make each element also fade out before the next element comes along?
