SOLVED: Animated view with rotation, has problem as it moves up and down

@Edhoru HWS+

May '23

Ok, so I've a simple loader animation, but when I present the animation from a NavigationLink, just for showcase, the view moves up and down, it works fine in the view preview, but simulator and devices have this issue.

struct SystemDesignView: View {

    var body: some View {
        NavigationStack  {
            List {
                Section("Animated Components WIP") {
                    NavigationLink {
                        LoaderView()
                    } label: {
                        Text("Loader")
                    }
                }
                .navigationTitle("System Design")
            }
        }
    }
}

And this is the animated view:

struct LoaderView: View {
    @State private var rotationAngle: Angle = .degrees(0)
    private var lineWidth = 2.0
    private var lenght = 42.0

    var body: some View {
        ZStack {
            // Full circle
            Circle()
                .strokeBorder(Color.electric.opacity(0.1), lineWidth: lineWidth)
                .frame(width: lenght, height: lenght)
                .background(Color.clear)

            // Quarter circle
            Circle()
                .trim(from: 0.0, to: 0.25)
                .stroke(Color.electric.opacity(1.0), style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round)) // Rounded corners
                .frame(width: lenght - lineWidth, height: lenght - lineWidth)
                .rotationEffect(rotationAngle, anchor: .center)

        }
        .onAppear() {
            withAnimation(Animation.linear(duration: 1.0).repeatForever(autoreverses: false)) {
                rotationAngle = .degrees(360)
            }
        }
    }
}

struct LoaderView_Previews: PreviewProvider {
    static var previews: some View {
        LoaderView()
    }
}

Any idea how to fix it?, thank you

Here is a video https://github.com/Edhoru/MyParty/blob/main/Simulator%20Screen%20Recording%20-%20iPhone%2014%20Pro%20-%202023-05-11%20at%2008.51.07.mp4

@Hectorcrdna

May '23

Hi,

I found 2 work arounds to this problem, only tested on simulator,

is to wrap the withAnimation in a DispatchQueue.main.async
is to change from a onApear to a task

.onAppear {
    DispatchQueue.main.async {
        withAnimation(Animation.linear(duration: 1.0).repeatForever(autoreverses: false)) {
            rotationAngle = .degrees(360)
        }
    }
}

.task {
    withAnimation(Animation.linear(duration: 1.0).repeatForever(autoreverses: false)) {
        rotationAngle = .degrees(360)
    }
}

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

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.