XCode (Bug?) (SwiftUI): Em vez de dimensionar e alterar a opacidade onde estão, minhas visualizações vêm da borda da tela

Question

Estou tentando ter um círculo na minha tela com dois círculos atrás dele em um ZStack que entra e sai facilmente com o ScaleEffect () e muda a opacidade. Fiz isso em um arquivo SwiftUI separado, onde parecia não haver problemas, mas assim que coloquei em meu ContentView (), esse bug estranho pareceu ocorrer.

Por favor, ignore os círculos no fundo, isso é apenas a minha visão de fundo. Mas está vendo esses dois círculos de tons de azul ligeiramente diferentes? Eles continuam entrando e saindo da tela, passando por trás do ícone azul escuro "mais" e saindo novamente. Enquanto isso, gostaria que eles simplesmente estivessem atrás do círculo "mais".

insira a descrição da imagem aqui

insira a descrição da imagem aqui

insira a descrição da imagem aqui Isso é devido a algum tipo de bug do XCode? Ou escrevi algo errado no meu código? Eu realmente apreciaria se alguém pudesse esclarecer :)

Aqui está meu código. Eu tornei um @State private var buttonIsAnimating e o padronizei como false, e disse que assim que o botão aparecer, os círculos deveriam começar a se animar. Há algo errado com o 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

Experimente com link de animação para 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)