SwiftUI影片導致系結條件視圖一閃一閃

我對此設定有疑問：

ZStack {
  ViewOne
  if something ? ViewTwo : nil
}
.animation()

問題是當影片開始時，ViewTwo 閃爍。我在想這與視圖重新渲染有關嗎？但我不太明白。我試過移動影片，分別在每個視圖上使用它，將它們全部組合在一個視圖中，但是當它基于條件時它總是閃爍。我希望兩個視圖一起制作影片。

這是一段可重現的代碼片段。

struct ContentView: View {
    @State var isAnimating: Bool
    
    var body: some View {
        ZStack {
            VStack {
                ForEach((1...5).reversed(), id: \.self) {_ in
                    ZStack {
                        RoundedRectangle(cornerRadius: 5)
                            .foregroundColor(.blue)
                            .frame(width: 200, height: 50)
                            .rotationEffect(.degrees(isAnimating == true ? 5 : 0))
                        isAnimating
                        ? ButtonImage()
                        : nil
                    }
                    .animation(
                        .easeInOut(duration: 0.3)
                        .repeatForever(autoreverses: true)
                        , value: isAnimating
                    )
                }
                Button(action: {
                    self.isAnimating.toggle()
                }, label: {
                    Text("Animate")
                })
            }
        }
        .rotationEffect(.degrees(isAnimating == true ? 5 : 0))
    }
}

struct ButtonImage: View {
    private let buttonSize: CGSize = CGSize(width: 25, height: 25)
    
    var body: some View {
        Button(action: {
            // to something
        }) {
            Image(systemName: "flame")
                .resizable()
                .renderingMode(.template)
                .background(Color.red)
                .foregroundColor(Color.yellow)
                .frame(width: buttonSize.width, height: buttonSize.height)
        }
        .frame(width: buttonSize.width, height: buttonSize.height)
        .offset(x: -buttonSize.width / 2, y: -buttonSize.height / 2)
}
   

關于如何解決這個問題的任何想法？根據條件顯示視圖，同時在不閃爍的情況下對其進行影片處理？

uj5u.com熱心網友回復：

想辦法了！不確定這是否是最好的方法，但它確實有效。

將影片分別添加到兩個視圖，然后將不透明度修改器添加到第二個視圖。這是我使用的代碼。

struct ContentView: View {
    @State var isAnimating: Bool
    
    var body: some View {
        ZStack {
            VStack {
                ForEach((1...5).reversed(), id: \.self) {_ in
                    ZStack {
                        RoundedRectangle(cornerRadius: 5)
                            .foregroundColor(.blue)
                            .frame(width: 200, height: 50)
                            .rotationEffect(.degrees(isAnimating == true ? 5 : 0))
                            .animation(
                                .easeInOut(duration: 0.3)
                                .repeatForever(autoreverses: true)
                                , value: isAnimating
                            )
                        ButtonImage(isAnimating: $isAnimating)
                            .opacity(isAnimating ? 1 : 0)
                    }
                }
                Button(action: {
                    self.isAnimating.toggle()
                }, label: {
                    Text("Animate")
                })
            }
        }
        .rotationEffect(.degrees(isAnimating == true ? 5 : 0))
    }
}

struct ButtonImage: View {
    private let buttonSize: CGSize = CGSize(width: 25, height: 25)
    @Binding var isAnimating: Bool
    
    var body: some View {
        Button(action: {
            // to something
        }) {
            Image(systemName: "flame")
                .resizable()
                .renderingMode(.template)
                .background(Color.red)
                .foregroundColor(Color.yellow)
                .frame(width: buttonSize.width, height: buttonSize.height)
        }
        .frame(width: buttonSize.width, height: buttonSize.height)
        .offset(x: -buttonSize.width / 2, y: -buttonSize.height / 2)
        .rotationEffect(.degrees(isAnimating == true ? 5 : 0))
        .animation(
            .easeInOut(duration: 0.3)
            .repeatForever(autoreverses: true)
            , value: isAnimating
        )
    }
}

標籤：迅速代码动画迅捷

上一篇：如何使div隨滑鼠游標平滑移動？

下一篇：在React中使影像可移動