XCode (Bug?) (SwiftUI): Daripada Skala dan Ubah Opasitas di mana mereka berada, Tampilan saya masuk dari tepi layar

Jan 10 2021

Saya mencoba memiliki lingkaran di layar saya dengan dua lingkaran di belakangnya dalam ZStack yang memudahkan masuk dan keluar dengan ScaleEffect (), dan mengubah opacity. Saya membuat ini di file SwiftUI terpisah, di mana sepertinya tidak ada masalah, tetapi begitu saya memasukkannya ke ContentView () saya, bug aneh ini sepertinya terjadi.

Harap abaikan lingkaran di latar belakang, itu hanya tampilan latar belakang saya. Tapi lihat dua lingkaran dengan warna biru yang sedikit berbeda itu? Mereka terus masuk dan keluar layar, muncul di belakang ikon "plus" biru tua lalu pergi lagi. Sementara itu, saya ingin mereka berada di belakang lingkaran "plus".

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini Apakah ini karena beberapa jenis bug XCode? Atau apakah saya menulis sesuatu yang salah dalam kode saya? Saya akan sangat menghargai jika seseorang dapat mengklarifikasi :)

Ini kode saya. Saya membuat @State private var buttonIsAnimating dan menetapkan default ke false, dan mengatakan bahwa setelah tombol muncul, lingkaran akan mulai beranimasi. Apakah ada yang salah dengan kode?

 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()
                            }
                        }

Jawaban

1 Asperi Jan 10 2021 at 11:48

Coba dengan animasi tautan untuk menyatakan, seperti

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)