SwiftUI animated circle jumps from upper left corner to center

Question

Here's my Circle:

#if DEBUG
struct AnimatedCircle_Previews: PreviewProvider {
    static var previews: some View {
        AnimatedCircle()
    }
}
#endif

struct AnimatedCircle: View {
    @State var scale: CGFloat = 1

    var body: some View {
        NavigationView {
            Circle()
                .frame(width: 200, height: 200)
                .scaleEffect(scale)
                .onAppear {
                    let baseAnimation = Animation.easeInOut(duration: 1)
                    let repeated = baseAnimation.repeatForever(autoreverses: true)
                    withAnimation(repeated) {
                        scale = 0.5
                    }
            }
        }
    }
}

The moment my Circle() is wrapped inside a NavigationView, thing break and the circle starts at the upper left corner, animates to the middle and the entire view is being animated as well.

I've been observin this behavior after updating to XCode 13 & iOS 15; before everything worked.

I've already tried wrapping my Circle within different Stacks. Nothing worked, how can I have my circle be in the center of the screen and only scale that Circle - without affecting the parent + sibling views?

score 1 · Answer 1 · answered Oct 20 '21 at 15:57

As @RajaKishan suggested, it's a broken explicit animation in NavigationView.

Here's a fixed version:

#if DEBUG
struct AnimatedCircle_Previews: PreviewProvider {
    static var previews: some View {
        AnimatedCircle()
    }
}
#endif

struct AnimatedCircle: View {
    @State var scale: CGFloat = 1

    var body: some View {
        NavigationView {
            Circle()
                .frame(width: 200, height: 200)
                .scaleEffect(scale)
                .onAppear {
                    let baseAnimation = Animation.easeInOut(duration: 1)
                    let repeated = baseAnimation.repeatForever(autoreverses: true)
                    DispatchQueue.main.async {
                        withAnimation(repeated) {
                            scale = 0.5
                        }
                    }
            }
        }
    }
}

Notice the DispatchQueue.main.async call.

SwiftUI animated circle jumps from upper left corner to center

1 Answers1