SwiftUI broken animation on simulator

Question

I have been playing around with SwiftUI and its animation. Below is my code of a circle inside a navigationView with scaleEffect animation

@State private var isAnimating = false

NavigationView{
VStack{
        ZStack{
            Circle()
                .fill(Color.blue)
                .shadow(radius: 15)
                .frame(width: 150, height: 150, alignment: .center)
                .scaleEffect(isAnimating ? 1.2 : 1)
                .onAppear() {
                    withAnimation(Animation.easeInOut(duration: 1.2).repeatForever()){
                        self.isAnimating = true
                    }
                }
        }
        .padding(.top, 140)
    Spacer()
}
.edgesIgnoringSafeArea(.all)
}

My preview shows the expected animation:

But somehow on the simulator, the animation is totally different:

Is this a bug from SwiftUI? What did I do wrong here?

score 2 · Accepted Answer · answered Jan 08 '21 at 16:38

2

Here is a solution. Tested with Xcode 12.1 / iOS 14.1

Circle()
    .fill(Color.blue)
    .shadow(radius: 15)
    .frame(width: 150, height: 150, alignment: .center)
    .scaleEffect(isAnimating ? 1.2 : 1)
    .animation(Animation.easeInOut(duration: 1.2).repeatForever(), value: isAnimating)
    .onAppear() {
        self.isAnimating = true
    }

Note: in any weird animation effect case try review your animations and limit every to value of only that state which it should track.

answered Jan 08 '21 at 16:38

Asperi

228,894
20
464
690

Hi, thanks it works! Is there any reason why my code doesn't show the animation correctly on the simulator? or is this simply a bug in SwiftUI? – dw96 Jan 08 '21 at 17:00
1

If you remove navigation view then it also works . But you miss navigation – Raja Kishan Jan 08 '21 at 17:29

SwiftUI broken animation on simulator

1 Answers1