为什么我的 SwiftUI 动画在旋转时恢复到前一帧？

Question

我有一个 SwiftUI 视图，它是一种闪烁的“警告”背景。它出现在另一个视图中，其大小会根据设备方向而变化。一切都在第一次出现时正常工作，但如果在警告视图处于活动状态时旋转设备，它会将先前方向的框架合并到动画中，使其不仅会闪烁，还可以移入和移出视图它的定位，以及改变它在以前的方向上的大小。为什么会发生这种情况，我该如何解决？通用代码：

struct PulsatingWarningBackground: View {
    let color : Color
    let speed : Double
    @State private var opacity : Double = 1
    var body: some View {
        GeometryReader {geometry in
            self.color
            .opacity(self.opacity)
            .animation(
            Animation
                .linear(duration: self.speed)
                .repeatForever(autoreverses: true)
            )
            .onAppear(perform: {self.opacity = 0})
        }
    }
}

struct PulsatingWarningViewHolder: View {
    var body: some View {
        GeometryReader {geometry in
            ZStack {
                Color.white
                ZStack {
                    Color.black
                    PulsatingWarningBackground(color: .red, speed: 1/4)
                }.frame(width: geometry.frame(in: .local).width/5, height: geometry.frame(in: .local).height/10, alignment: .center)
            }
        }
    }
}

Answer 1

您只能将animation 应用于opacity，方法是在onAppear(perform:) 中使用withAnimation(_:_:)。它可以根据您的需要正常工作。

struct PulsatingWarningBackground: View {
    let color : Color
    let speed : Double
    @State private var opacity : Double = 1
    var body: some View {
        self.color
        .opacity(self.opacity)
        .onAppear(perform: {
            withAnimation(Animation.linear(duration: self.speed).repeatForever()) {
                self.opacity = 0
            }
        })
    }
}

struct PulsatingWarningViewHolder: View {
    var body: some View {
        GeometryReader {geometry in
            ZStack {
                Color.white
                ZStack {
                    Color.black
                    PulsatingWarningBackground(color: .red, speed: 1/4)
                }
                .frame(width: geometry.frame(in: .local).width/5, height: geometry.frame(in: .local).height/10, alignment: .center)
            }
        }
    }
}