0

I'm trying to make a car animation by composing some view. First I gave an animation rotationeffect with 0.5 speed to the tire so it would rotate. Then I put the car body and tire into a zstack.

struct CarBodyView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                CarWindow()
                    .background(
                        HalfCircle()
                            .foregroundColor(.red)
                    )
                    .background(
                        CarShape()
                            .foregroundColor(.red)
                    )
                HStack {
                    Spacer()
                    Tire(width: geometry.size.width/3.5)
                    Spacer()
                    Tire(width: geometry.size.width/3.5)
                    Spacer()
                }
                .frame(height: geometry.size.height)
                .offset(y: geometry.size.height/2 - geometry.size.width/3/6)
            }
        }
    }
}

After that I want to make the car to move from right to left, so I give animation to it.

struct RoadWithCar: View {
    let entrance: HorizontalAlignment
    @State private var isMoving = false
    
    var body: some View {
        ZStack {
            Road()
            CarBodyView()
                .frame(width: 140, height: 70)
                .offset(x: isMoving ? -UIScreen.main.bounds.midX-70 : UIScreen.main.bounds.midX+100, y: -6)
                .animation(.linear(duration: 2.0).repeatForever(autoreverses: false), value: isMoving)
                .task {
                    isMoving.toggle()
                }
        }
    }
}

At first I called RoadWithCar outside a stack it works just fine. But when I put it inside a stack it's started to fall apart. The tire is getting the position animation but using the speed from its origin that's supposed to be the speed of its rotation. How to make this work? Bcs I need to put it inside a vstack 🥲

Here’s how it looks inside a navigationview enter image description here

with the code

struct ContentView: View {
    var body: some View {
                NavigationView {
                        RoadWithCar(entrance: [HorizontalAlignment.leading, HorizontalAlignment.trailing].randomElement()!)
        }
    }
}

struct RoadWithCar: View {
    let entrance: HorizontalAlignment
    @State private var isMoving = false
    
    var body: some View {
        ZStack {
            Road()
            CarBodyView()
                .frame(width: 140, height: 70)
                .offset(x: isMoving ? -UIScreen.main.bounds.midX-70 : UIScreen.main.bounds.midX+100, y: -6)
                .animation(.linear(duration: 2.0).repeatForever(autoreverses: false), value: isMoving)
                .task {
                    isMoving.toggle()
                }
        }
    }
}

and here’s when it’s inside a stack/outside navigationview enter image description here

with the code

struct ContentView: View {
    var body: some View {
                NavigationView {
                    VStack {
                        RoadWithCar(entrance: [HorizontalAlignment.leading, HorizontalAlignment.trailing].randomElement()!)
            }
        }
    }
}

struct RoadWithCar: View {
    let entrance: HorizontalAlignment
    @State private var isMoving = false
    
    var body: some View {
        ZStack {
            Road()
            CarBodyView()
                .frame(width: 140, height: 70)
                .offset(x: isMoving ? -UIScreen.main.bounds.midX-70 : UIScreen.main.bounds.midX+100, y: -6)
                .animation(.linear(duration: 2.0).repeatForever(autoreverses: false), value: isMoving)
                .task {
                    isMoving.toggle()
                }
        }
    }
}
4
  • have you tried adding .compositingGroup() to the CarBodyView ZStack, or the just after .animation(...). Commented Apr 18, 2023 at 2:13
  • can you show the code that does not work, ...when it’s inside a stack/outside navigationview, seems to be relevant Commented Apr 18, 2023 at 2:22
  • @workingdogsupportUkraine I’ve tried adding the .compositingGroup() but nothing happened Commented Apr 18, 2023 at 2:53
  • I cannot replicate the problem with my simple tests. You could try this: in ContentView, add .drawingGroup() to the VStack or RoadWithCar(...), or the GeometryReader in CarBodyView Commented Apr 18, 2023 at 3:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.