SwiftUI unwanted movement in .animation

Question

Hello and thanks for reading my post. My problem is following: When I start an try to do an loading indicator animation there is an unwanted movement. The Circle should stay in Place and rotate (like a indicator should do), but in my case it move slightly upwards and resets at the end of animation and starts to move upward again. It makes absolutely no sense to me! If there is any solution, I will try it! It looks like this:

My bugged loading indicator

Here is my Code:

ZStack {
  Circle()
   .stroke(Color(.systemGray5), lineWidth: 40)
   .frame(width: 250, height: 250)
   .animation(nil)
  Circle()
   .trim(from: 0, to: 0.2)
   .stroke(Color.gray, lineWidth: 40)
   .frame(width: 250, height: 250)
   .rotationEffect(Angle(degrees: isCircleRotating ? 360 : 0))
   //I guess this is where the problem happens
   .animation(Animation.linear(duration: 1).repeatForever(autoreverses: false))
   .onAppear() {
     self.isCircleRotating = true
    }
}

What happens if you wrap the contents of your onAppear with `Task { @MainActor in … }`? — jnpdx, Feb 05 '23 at 05:40
It still has unwanted movement like in my .gif, but thanks for helping — MXNL, Feb 05 '23 at 08:37

score 0 · Answer 1 · answered Feb 05 '23 at 10:41

0

Okay so I thought about the animation in another way. The loading screen is during a network call. I outsourced my network call in an own function. Before that, the network call was was in the init of my Extension View. I now have a bool "isLoading" which calls if the call is loading or not. I wrapped my Stack with the Circles in a If condition with the isLoading Bool and I don't know why, but it worked and I'm happy now.

answered Feb 05 '23 at 10:41

MXNL

3
5

2

"Work" like that shouldn't ever be done in the `init` of a `View` -- should always be in a `task` or `onAppear` – jnpdx Feb 05 '23 at 19:56

SwiftUI unwanted movement in .animation

1 Answers1