swiftUI геометрияЭффект анимации

Question

Я практикую эффект геометрии swiftui, применяя его к переходу от вида к другому. В первом представлении есть три круга разных цветов, пользователь выбирает цвет, нажимая нужный цвет, и нажимает «Далее», чтобы перейти ко второму представлению, содержащему кружок выбранного цвета. GeometryEffect отлично работает при переходе от к, в котором положение выбранной окружности плавно анимируется, но проблема возврата назад. GeometryEffect не плавно анимирует положение круга при возврате изSecondViewкFirstView. Вместо этого кажется, что он перемещает круг влево и вправо, прежде чем позиционировать круг в исходное положение.

Я делюсь GIF на моем диске Google, чтобы показать, что я имею в виду:

Я хотел бы добиться чего-то вроде этого: желаемый результат (размер файла слишком велик для прямой загрузки)

Спасибо!

Первый вид:

      struct FirstView: View {
@Namespace var namespace    

@State var whichStep: Int = 1
@State var selection: Int = 0
var colors: [Color] = [.red, .green, .blue]
@State var selectedColor = Color.black

var transitionNext: AnyTransition = .asymmetric(
        insertion: .move(edge: .trailing),
        removal:.move(edge: .leading))
    
    var transitionBack: AnyTransition = .asymmetric(
        insertion: .move(edge: .leading),
        removal:.move(edge: .trailing))
    
    @State var transition: AnyTransition = .asymmetric(
        insertion: .move(edge: .trailing),
        removal:.move(edge: .leading))

var body: some View {
    VStack {
        HStack { // back and next step buttons
            Button { // back button
                print("go back")
                withAnimation(.spring()) {
                    whichStep = 1
                    transition = transitionBack
                }
            } label: {
                Image(systemName: "arrow.backward")
                    .font(.system(size: 20))
            }
            .padding()

            Spacer()

            Button { // next button
                withAnimation(.spring()) {
                        whichStep = 2
                        transition = transitionNext
                }
            } label: {
                Text("next step")
            }
        }
        
        Spacer()
        
        if whichStep == 1 {
            ScrollView {
                ForEach(0..<colors.count, id:\.self) { color in
                    withAnimation(.none) {
                    Circle()
                        .fill(colors[color])
                        .frame(width: 100, height: 100)
                        .matchedGeometryEffect(id: color, in: namespace)
                        .onTapGesture {
                            selectedColor = colors[color]
                            selection = color
                        }
                    }
                }
            }
            Spacer()
            
        } else if whichStep == 2 {
  //                withAnimation(.spring()) {
                ThirdView(showScreen: $whichStep, namespace: namespace, selection: $selection, color: selectedColor)
                .transition(transition)
 //                }
            Spacer()
        }
    }
    .padding()        
}

}

Второй вид:

      struct ThirdView: View {
var namespace: Namespace.ID
@Binding var selection: Int
@State var color: Color

var body: some View {
    VStack {
        GeometryReader { geo in
            Circle()
                .fill(color)
                .frame(width: 100, height: 100)
                .matchedGeometryEffect(id: selection, in: namespace)
        }
    }
    .ignoresSafeArea()
}

}