XCode (Bug?) (SwiftUI): แทนที่จะปรับขนาดและเปลี่ยนความทึบที่พวกเขาอยู่มุมมองของฉันเข้ามาจากขอบของหน้าจอ

Question

ฉันกำลังพยายามสร้างวงกลมบนหน้าจอโดยมีวงกลมสองวงอยู่ข้างหลังใน ZStack ซึ่งทำให้เข้าและออกได้ง่ายด้วย ScaleEffect () และเปลี่ยนความทึบ ฉันสร้างสิ่งนี้ในไฟล์ SwiftUI แยกต่างหากซึ่งดูเหมือนว่าจะไม่มีปัญหา แต่เมื่อฉันใส่ลงใน ContentView () ของฉันข้อผิดพลาดแปลก ๆ นี้ดูเหมือนจะเกิดขึ้น

โปรดอย่าสนใจวงกลมในพื้นหลังนั่นเป็นเพียงมุมมองพื้นหลังของฉัน แต่เห็นวงกลมสองวงที่มีเฉดสีน้ำเงินต่างกันเล็กน้อยไหม? พวกเขาเข้าและออกจากหน้าจอไปเรื่อย ๆ โดยอยู่ด้านหลังไอคอน "บวก" สีน้ำเงินเข้มแล้วออกอีกครั้ง ในขณะเดียวกันฉันต้องการให้พวกเขาอยู่หลังวงกลม "บวก"

ป้อนคำอธิบายภาพที่นี่

ป้อนคำอธิบายภาพที่นี่

ป้อนคำอธิบายภาพที่นี่เป็นเพราะข้อผิดพลาดของ XCode หรือไม่? หรือว่าฉันเขียนโค้ดผิดพลาด? ฉันจะขอบคุณมากถ้ามีใครสามารถชี้แจงได้ :)

นี่คือรหัสของฉัน ฉันสร้างปุ่ม var ส่วนตัวของ @State IsAnimating และตั้งค่าเริ่มต้นเป็นเท็จและบอกว่าเมื่อปุ่มปรากฏวงกลมควรจะเริ่มเคลื่อนไหว มีบางอย่างผิดปกติกับรหัสหรือไม่?

 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)