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

Posted 2023-02-24

【中文标题】为啥我的 SwiftUI 动画在旋转时恢复到前一帧？

【英文标题】：Why does my SwiftUI animation revert to the previous frame on rotation?为什么我的 SwiftUI 动画在旋转时恢复到前一帧？

【发布时间】：2020-06-09 04:06:45

【问题描述】：

我有一个 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)
            
        
    

【参考方案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)
            
        
    

【讨论】：

谢谢！仍然掌握动画的窍门。尝试使用 .animation(nil) 取消不透明度以外的动画，但无济于事...