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!

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.