XCode (Bug?) (SwiftUI): Plutôt que de redimensionner et de modifier l'opacité là où ils se trouvent, mes vues arrivent depuis le bord de l'écran

Question

J'essaie d'avoir un cercle sur mon écran avec deux cercles derrière dans un ZStack qui s'entretiennent et sortent facilement avec ScaleEffect (), et modifient l'opacité. J'ai fait cela dans un fichier SwiftUI séparé, où il ne semblait y avoir aucun problème, mais une fois que je l'ai mis dans mon ContentView (), ce bogue étrange a semblé se produire.

Veuillez ignorer les cercles en arrière-plan, ce n'est que ma vue en arrière-plan. Mais voyez-vous ces deux cercles de nuances de bleu légèrement différentes? Ils continuent d'entrer et de sortir de l'écran, venant derrière l'icône "plus" bleu foncé et repartent. En attendant, j'aimerais qu'ils soient simplement derrière le cercle «plus».

entrez la description de l'image ici

entrez la description de l'image ici

entrez la description de l'image ici Est-ce à cause d'une sorte de bogue XCode? Ou ai-je écrit quelque chose de mal dans mon code? J'apprécierais vraiment que quelqu'un puisse clarifier :)

Voici mon code. J'ai créé un @State private var buttonIsAnimating et l'ai défini par défaut sur false, et j'ai dit qu'une fois que le bouton apparaît, les cercles devraient commencer à s'animer. Quelque chose ne va pas avec le code?

 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

Essayez avec une animation de lien pour indiquer, comme

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)