XCode (Bug?) (SwiftUI): Zamiast skalować i zmieniać krycie tam, gdzie są, moje widoki pojawiają się z krawędzi ekranu

Question

Próbuję mieć kółko na moim ekranie z dwoma okręgami za nim w ZStack, które ułatwiają wchodzenie i wychodzenie za pomocą ScaleEffect () i zmieniają krycie. Zrobiłem to w osobnym pliku SwiftUI, w którym wydawało się, że nie ma żadnych problemów, ale kiedy umieściłem go w moim ContentView (), pojawił się ten dziwny błąd.

Proszę zignorować kółka w tle, to tylko mój widok tła. Ale czy widzisz te dwa okręgi o nieco innych odcieniach niebieskiego? Wchodzą i wychodzą z ekranu, przechodzą za ciemnoniebieską ikoną „plusa”, a następnie wychodzą. Tymczasem chciałbym, żeby po prostu znaleźli się za kółkiem „plusów”.

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

wprowadź tutaj opis obrazu. Czy to z powodu jakiegoś błędu XCode? Czy może napisałem coś złego w swoim kodzie? Naprawdę byłbym wdzięczny, gdyby ktoś mógł to wyjaśnić :)

Oto mój kod. Zrobiłem @State private var buttonIsAnimating i ustawiłem go domyślnie na false i powiedziałem, że po pojawieniu się przycisku kręgi powinny zacząć animować. Czy coś jest nie tak z kodem?

 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

Spróbuj z animacją linku do stwierdzenia, na przykład

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)