XCode(Bug?)(SwiftUI):不透明度を拡大して変更するのではなく、ビューが画面の端から表示されます

Jan 10 2021

私は、ScaleEffect()を使用して簡単に出し入れし、不透明度を変更する2つの円をZStackの背後に配置して、画面上に円を配置しようとしています。これを別のSwiftUIファイルで作成しましたが、問題はないようでしたが、ContentView()に入れると、この奇妙なバグが発生したようです。

背景の円は無視してください。これは私の背景ビューです。しかし、わずかに異なる青の色合いの2つの円が表示されますか?画面に出入りし続け、濃い青色の「プラス」アイコンの後ろに来て、再び離れます。その間、私は彼らに単に「プラス」の円の後ろにいて欲しいです。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

ここに画像の説明を入力してくださいこれはある種のXCodeバグが原因ですか?または、コードに何か間違ったことを書きましたか?誰かが明確にすることができれば本当にありがたいです:)

これが私のコードです。@Stateプライベート変数buttonIsAnimatingを作成し、デフォルトで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()
                            }
                        }

回答

1 Asperi Jan 10 2021 at 11:48

次のように、状態へのリンクアニメーションを試してください

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)