Falling effect SwiftUI

Question

Balvir-255 OP

Created Feb ’24

Replies 1

Boosts 0

Participants 2

Hi everyone!

import SwiftUI

struct ContentView: View {

    let screenHeight = UIScreen.main.bounds.height
    let letters: [String] = ["A", "B"]
    @State private var yOffset: CGFloat = 0.0
    
    var body: some View {
        ForEach(letters, id: \.self) { letter in
            Text(letter)
                .padding()
                .font(.largeTitle)
                .offset(x: 0, y: yOffset)
                .animation(Animation.linear(duration: 5.0).repeatForever(autoreverses: false))
                .onAppear {
                    yOffset = screenHeight - 90
                }
        }   
    }
}

I would like in this code, the letters to fall from the beginning of the screen to its end, I have the size of screen's height, but actually I can't understand how I can I use it, until the letters can start from the beginning of the screen. And I would also like that once they reach the bottom, they start falling again...

I can't understand how this effect can be achieved, is there anyone who can help me?

Answered by Claude31 in 778798022

If I understand your problem correctly, it is due to the fact that animation starts at vertical center.

Include in a Stack and add a Spacer().

It worked for me:

    var body: some View {
        VStack {  // <<-- Add this
            ForEach(letters, id: \.self) { letter in
                Text(letter)
                    .padding()
                    .font(.largeTitle)
                    .offset(x: 0, y: yOffset)
                    .animation(Animation.linear(duration: 5.0).repeatForever(autoreverses: false))
                    .onAppear {
                        yOffset = screenHeight - 90
                    }
            }
            Spacer()  // <<-- Add this
        }
    }

Boost

Answer 1

Claude31 OP

Feb ’24

Accepted Answer

If I understand your problem correctly, it is due to the fact that animation starts at vertical center.

Include in a Stack and add a Spacer().

It worked for me:

    var body: some View {
        VStack {  // <<-- Add this
            ForEach(letters, id: \.self) { letter in
                Text(letter)
                    .padding()
                    .font(.largeTitle)
                    .offset(x: 0, y: yOffset)
                    .animation(Animation.linear(duration: 5.0).repeatForever(autoreverses: false))
                    .onAppear {
                        yOffset = screenHeight - 90
                    }
            }
            Spacer()  // <<-- Add this
        }
    }

0