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

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

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