Why does this pulsating animation move x and y position?

user_3919052 0
Viewed 112

What I want is a Text() view that scales up and down infinitely in place. What I have is one that scales up and down while also moving x and y position. I don't get it.

How do I get this thing scaling up and down without moving x/y?

Thanks for your help!

struct ContentView: View {
    @State private var pulsate: Bool = false
    
    var body: some View {
        GeometryReader { geo in
        Text("Hello, World!")
            .foregroundColor(Color.black)
            .multilineTextAlignment(.center)
            .position(x: geo.size.width * 0.12, y: geo.size.height * 0.05)
            .shadow(radius: 2)
            .scaleEffect(self.pulsate ? 1.0 : 1.05)
            .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true).speed(1))
            .onAppear() {
                self.pulsate.toggle()
            }
        }
    }
}
swiftui swift
1 Answers

Position of modifier is important. In your case it should be after animation to be not affected, as in

var body: some View {
    GeometryReader { geo in
    Text("Hello, World!")
        .foregroundColor(Color.black)
        .multilineTextAlignment(.center)
        .shadow(radius: 2)
        .scaleEffect(self.pulsate ? 1.0 : 1.05)
        .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true).speed(1))
        .position(x: geo.size.width * 0.12, y: geo.size.height * 0.05)  // << here!!
        .onAppear() {
            self.pulsate.toggle()
        }
    }
}
user_122990300
Related