TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

How to fade out element of array?

Forums > SwiftUI

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?

   

@twoStraws has an excellent article. Doesn't the article cover the effect you want?

See -> Phase Animators

Keep Coding!

Please return here and let us know how you resolved your animation woes. Help the rest of us!

   

Hacking with Swift is sponsored by String Catalog.

SPONSORED Get accurate app localizations in minutes using AI. Choose your languages & receive translations for 40+ markets!

Localize My App

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.