SwiftUI 动画滑入和滑出

Posted 2023-02-24

【中文标题】SwiftUI 动画滑入和滑出

【英文标题】：SwiftUI Animation Slide In and Out

【发布时间】：2020-08-03 04:00:01

【问题描述】：

我有一个将显示在另一个视图之上的视图。视图动画完美地从右侧滑入，但是当我单击“关闭”按钮时，视图消失了，没有所需的动画在消失前滑回右侧。

我尝试过使用 .opacity(self.isShowing ? 1 : 0)，但是视图会淡入淡出，我需要它来滑入和滑出。其他变体没有产生预期的结果。

我做错了什么？任何指导，甚至是重复的解决方案（我找不到）都将不胜感激。

struct NotificationView<parentView>: View where parentView: View 
    @Binding var isShowing: Bool
    let parentView: () -> parentView

    var body: some View 
        GeometryReader  geometry in
            
            ZStack(alignment: .center) 
                self.parentView()
                    
                if(self.isShowing == true)
                    VStack 
                        Text("This is a test view\n")
                        Button(action: 
                            self.isShowing.toggle()
                        ) 
                            Text("Close")
                        
                    
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .background(Color(UIColor.systemBackground))
//                    .opacity(self.isShowing ? 1 : 0)
                    .transition(.move(edge: self.isShowing ? .trailing : .leading))
                    .animation(Animation.easeInOut(duration: 1.0))
                
            
        
    

【参考方案1】：

将条件部分移动到容器中并为容器添加动画，这样它就会为内容设置动画，比如

var body: some View 
    GeometryReader  geometry in
        
        ZStack(alignment: .center) 
            self.parentView()
                
          VStack                        // << here !!
            if(self.isShowing == true)
                VStack 
                    Text("This is a test view\n")
                    Button(action: 
                        self.isShowing.toggle()
                    ) 
                        Text("Close")
                    
                
                .frame(width: geometry.size.width, height: geometry.size.height)
                .background(Color(UIColor.systemBackground))
                .transition(.move(edge: self.isShowing ? .trailing : .leading))
            
          .animation(Animation.easeInOut(duration: 1.0))    // << here !!
        
    

【讨论】：

工作完美！谢谢，我已经为此工作了几个小时，再次感谢！