XCode (ошибка?) (SwiftUI): вместо того, чтобы масштабировать и изменять непрозрачность там, где они есть, мои представления поступают с края экрана.

Question

Я пытаюсь создать круг на своем экране с двумя кругами позади него в ZStack, которые облегчают вход и выход с помощью ScaleEffect() и изменяют непрозрачность. Я сделал это в отдельном файле SwiftUI, где, казалось, не было проблем, но как только я поместил его в свой ContentView(), возникла эта странная ошибка.

Пожалуйста, не обращайте внимания на круги на заднем плане, это просто мой вид фона. Но видите эти два круга немного разных оттенков синего? Они продолжают входить и выходить из экрана, скрываться за темно-синим значком «плюс», а затем снова уходить. Между тем, я бы хотел, чтобы они просто находились за кружком «плюс».

введите описание изображения здесь

введите описание изображения здесь

введите здесь описание изображения Это из-за какой-то ошибки XCode? Или я что-то не так написал в своем коде? Буду очень признателен, если кто-нибудь прояснит :)

Вот мой код. Я создал приватную переменную @State для кнопкиIsAnimating и по умолчанию установил для нее значение false и сказал, что как только кнопка появится, круги должны начать анимацию. Что-то не так с кодом?

       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

Попробуйте использовать анимацию ссылки для состояния, например

      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)