CODEWITHSUNDEEP
iosswiftuiswiftui-navigationview
Satya Prakash Sahu
Satya Prakash Sahu

Reputation: 35

Rotation Effect not working as expected inside a navigation view, but works as expected in any other view that is not in navigation view

I want to add a shape to rotate around its axis and use it to create a background. In order to do this, I created a background view and decided to use that view on all my screens.

It seems that when I add the background view inside the navigation view it is anchored somewhere else other than the center. Can anyone please tell me how to achieve the expected result inside the navigation view?

However, when I give a rotation effect to an element it works as expected in all the views except in the views that contain a navigation view.

I cannot add a video here but adding drive links to better explain my problem.

Background View

Background View Video Link (Expected Result) : Background View

struct BackgroundView: View {
@State private var rotateBlob : Bool = false

var body: some View {
    
    GeometryReader { bounds in
    
    ZStack {
    Image("Inner Blob 1")
    .rotationEffect(.degrees(rotateBlob ? 360 : 0),anchor: .center)
            .animation(Animation.linear(duration: 3).repeatForever(autoreverses: false))
            .onAppear(perform: {
                self.rotateBlob = true
     })
}
    .frame(width: bounds.size.width)
        
    }
}}

Background View inside Navigation View (Unexpected Result) : Background View Inside Navigation View

struct RotationBug: View {
var body: some View {
    NavigationView{
        
        VStack{
            BackgroundView()
        }
        
        .navigationTitle("Profile")
    }
}
}

Upvotes: 1

Views: 1177

Answers (1)

keyvan yaghoubian
keyvan yaghoubian

Reputation: 322

struct BackgroundView: View {
@State private var rotateDegree : CGFloat = 0

var body: some View {
    
    GeometryReader { bounds in
    
    ZStack {
    Image("Inner Blob 1")
    .rotationEffect(Angle(degrees: rotateDegree))
    .onAppear(perform: {
         withAnimation(Animation.linear(duration: 3).repeatForever(autoreverses: false)) {
             self.rotateDegree = 360
         }
     })
    .frame(width: bounds.size.width)
    }
}}

Upvotes: 4

Related Questions