SwiftUI Animations in the same view are displayed differently

Question

In the first section there is no problem, but in the second section there is a problem in my animation. using the same view in the first section and the second section.

In the second section, the text shifts to the right and left. But I don't want that. I want the text to remain stable just like in the first section.

SectionView:

(option == 1) = image on the left, text on the right. (option == 2) = image on the right, text on the left.

struct SectionView: View {
    var title: String
    var imageView: AnyView
    var description: String
    var option: Int
    
    var body: some View {
        Group {
            if option == 1 {
                HStack {
                    ZStack {
                        Rectangle()
                            .frame(width: 125, height: 120)
                            .foregroundColor(Color(UIColor.secondarySystemBackground))
                            .cornerRadius(40, corners: [.topRight, .bottomRight])
                        
                        imageView
                    }
                    Spacer()
                    VStack {
                        Text(title)
                            .font(.system(size: 14, weight: .bold, design: .rounded))
                        Text(description)
                            .multilineTextAlignment(.center)
                            .font(.system(size: 12, weight: .medium, design: .rounded))
                            .padding(.trailing, 5)
                    }
                    .frame(height: 120)
                    .foregroundColor(Color(UIColor.label))
                }
            } else if option == 2 {
                HStack {
                    VStack {
                        Text(title)
                            .font(.system(size: 14, weight: .bold, design: .rounded))
                        
                        Text(description)
                            .multilineTextAlignment(.center)
                            .font(.system(size: 12, weight: .medium, design: .rounded))
                            .padding(.leading, 5)
                    }
                    .frame(height: 120)
                    .foregroundColor(Color(UIColor.label))
                    Spacer()
                    ZStack {
                        Rectangle()
                            .frame(width: 125, height: 120)
                            .foregroundColor(Color(UIColor.secondarySystemBackground))
                            .cornerRadius(40, corners: [.topLeft, .bottomLeft])
                        
                        imageView

                    }
                }
            }
        }
    }
}

MainViewModel:

I am adding sections here.

As you can see I'm using the same view in the two CategorySections I've added. In the first section, the animation is displayed properly, but while the animation is displayed in the second section, the text shifts to the right and left. What is the reason for this?

class MainViewModel: ObservableObject {

    @Published var section: [CategorySection] = []

    init() {
        getSections()
    }
    
    func getSections() {
        section = [
            
            CategorySection(title: "Trafik Levhaları", imageView: AnyView(PoliceSignsSectionIconView()), description: "Trafik levhaları trafiğe çıkan her sürücünün mutlaka dikkat etmesi gereken uyarı işaretleridir. Trafik kurallarını ve gerekliliklerini uygulama açısından önemli bir yeri olan trafik işaretleri mutlaka izlenmeli.  Bu bölümde trafik levha işaretlerinin anlamlarını öğrenebilirsiniz.", option: 1, page: TrafficSignsView()),
            
            CategorySection(title: "Polis İşaretleri", imageView: AnyView(PoliceSignsSectionIconView()), description: "Trafik polisleri gerektiği durumlarda yolda trafiğin kontrolünü sağlar. Çoğu yerde karşımıza çıkabilecek bu durumda trafik polisi işaretlerinin anlamını bilmemiz gerekmektedir. Bu bölümde polis işaretlerinin anlamlarını öğrenebilirsiniz.", option: 2, page: PoliceSignsView()),
....
            
        ]
    }
}

CategorySection Model:

struct CategorySection {
    let id = UUID()
    let title: String
    let imageView: AnyView
    let description: String
    let option: Int
    let page: Any
}

Using SectionView:

I am using the sections I added in MainViewModel here.

struct MainView: View {
    @ObservedObject var mainViewModel: MainViewModel = MainViewModel()
    @EnvironmentObject var publishObjects: PublishObjects
    var body: some View {
        NavigationView {
            ScrollView(showsIndicators: false) {
                VStack(spacing: 30) {
                    ForEach(mainViewModel.section, id: \.id) { section in
                        NavigationLink(
                            destination: AnyView(_fromValue: section.page)?.navigationBarTitleDisplayMode(.inline),
                            label: {
                                SectionView(title: section.title, imageView: section.imageView, description: section.description, option: section.option)
                            })
                    }
                }
            }
            .navigationBarTitle("Ehliyet Sınavım")
            .onAppear {
                
            }
        }
        .accentColor(Color(UIColor.label))
    }
}

PoliceSignsSectionIconView(Animation here):

I applied my animations on this page.

struct PoliceSignsSectionIconView: View {
    @State var isDrawing: Bool = true
    let pathBounds = UIBezierPath.calculateBounds(paths: [.policePath1, .policePath2, .policePath3, .policePath4, .policePath5, .policePath6, .policePath7, .policePath8, .policePath9, .policePath10])
    var body: some View {
        
        Text("Test Icon")
            .frame(width: 75, height: 70)
            .opacity(isDrawing ? 1 : 0)
            .onAppear {
                self.isDrawing.toggle()
            }
            .animation(.easeInOut(duration: 2).repeatForever(autoreverses: true))
    }
}

SwiftUI Animations in the same view are displayed differently

Answers (1)

Related Questions