XCode (Bug?) (SwiftUI): En lugar de escalar y cambiar la opacidad donde están, mis vistas provienen del borde de la pantalla

Question

Estoy tratando de tener un círculo en mi pantalla con dos círculos detrás de él en un ZStack que entra y sale fácilmente con ScaleEffect () y cambia la opacidad. Hice esto en un archivo SwiftUI separado, donde parecía que no había problemas, pero una vez que lo puse en mi ContentView (), este error extraño pareció ocurrir.

Por favor ignore los círculos en el fondo, esa es solo mi vista de fondo. ¿Pero ves esos dos círculos de tonos de azul ligeramente diferentes? Siguen entrando y saliendo de la pantalla, vienen detrás del icono azul oscuro "más" y luego vuelven a salir. Mientras tanto, me gustaría que simplemente estuvieran detrás del círculo "más".

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí ¿Es esto debido a algún tipo de error de XCode? ¿O escribí algo mal en mi código? Realmente agradecería si alguien pudiera aclarar :)

Aquí está mi código. Hice un @State private var buttonIsAnimating y lo puse por defecto en falso, y dije que una vez que aparezca el botón, los círculos deberían comenzar a animarse. ¿Hay algún problema con el código?

 ZStack {
                            Group {
                                Circle()
                                        .fill(Color("Background2").opacity(self.buttonIsAnimating ? 0.6 : 0))
                                        .frame(width: 75, height: 75, alignment: .center)
                                    .scaleEffect(self.buttonIsAnimating ? 1 : 0)
                                Circle()
                                    .fill(Color("Background3").opacity(self.buttonIsAnimating ? 0.7 : 0))
                                    .frame(width: 89, height: 89, alignment: .center)
                                    .scaleEffect(self.buttonIsAnimating ? 1 : 0)
                            }
                            .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true))
                            Button(action: {
                                self.showingAddANewToDoView.toggle()
                            }) {
                                Image(systemName: "plus.circle.fill")
                                    .resizable()
                                    .scaledToFit()
                                    .background(Circle().fill(Color("Background")))
                                    .foregroundColor(Color("Background4"))
                                    .frame(width: 60, height: 60)
                                    .padding(5)
                            }//: Button
                            .onAppear {
                                self.buttonIsAnimating.toggle()
                            }
                        }

Answer 1

Prueba con la animación de enlace al estado, como

Group {
    Circle()
            .fill(Color("Background2").opacity(self.buttonIsAnimating ? 0.6 : 0))
            .frame(width: 75, height: 75, alignment: .center)
        .scaleEffect(self.buttonIsAnimating ? 1 : 0)
    Circle()
        .fill(Color("Background3").opacity(self.buttonIsAnimating ? 0.7 : 0))
        .frame(width: 89, height: 89, alignment: .center)
        .scaleEffect(self.buttonIsAnimating ? 1 : 0)
}
.animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true), 
   value: self.buttonIsAnimating)