Choppy Animation SwiftUI 嵌套视图

Posted 2023-02-24

【中文标题】Choppy Animation SwiftUI 嵌套视图

【英文标题】：Choppy Animation SwiftUI Nested Views

【发布时间】：2021-10-07 22:20:13

【问题描述】：

我正在制作一个动画，该动画从屏幕底部显示一个视图，位于之前占据屏幕的部分视图上方。我的代码在技术上可以正常工作，但我担心动画看起来太不稳定。基本上，我认为正在发生的事情是，新的、上升的视图由其他几个视图组成，当我为它制作动画时，它也会为合并的子视图制作动画——这是我不喜欢的样子。

示例代码：

struct ButtonView: View 
    @State var show: Bool = false
    var body: some View 
        ZStack
            VStack 
                Button(action:  withAnimation(.linear(duration: 0.5))  show = !show  )  
                    Text("Press Me")
                
                Rectangle()
                    .foregroundColor(.gray)
            
        
        if show 
            VStack 
                CollapsibleView()
            
        
    


struct CollapsibleView: View 
    var body: some View 
        ZStack 
            VStack 
                Text("Text 1")
                Text("Text 2")
                Text("Text 3")
            
            .background(Color.white)
        
    

请注意，出于说明目的，持续时间设置得相当长，但即使在较小的持续时间值下，我仍然可以注意到断断续续的效果。

如何避免这种情况？有没有办法只为动作设置动画？

【参考方案1】：

这里有一种方法可以满足您的需求：

struct ContentView: View 
    
    @State var show: Bool = Bool()
    
    var body: some View 
        
        VStack 
            
            Button(action:  show.toggle() , label:  show ? Text("hide") : Text("show") )
                .animation(nil)
            
            Color.gray
            
            Group 
                
                if show  CollapsibleView().transition(.asymmetric(insertion: .move(edge: .bottom), removal: .move(edge: .bottom))) 
                
            
            .opacity(show ? 1.0 : 0.0)
            
        
        .animation(Animation.spring(response: 0.4, dampingFraction: 0.4, blendDuration: 1.0), value: show)
        
        
    


struct CollapsibleView: View 
    var body: some View 
        
        VStack(alignment: .leading) 
            Text("Text 1")
            Text("Text 2")
            Text("Text 3")
        
        .background(Color.white)
        
    

【讨论】：

我对弹簧效果并不是很感兴趣，但您似乎通过将所有文本元素包含在单个 VStack 中来解决了不稳定的问题。嵌套视图是否可以产生不连贯的效果？

或者我误解了你的代码在做什么......我只是在 CollapsibleView 中使用子视图运行它，它工作得很好。

VStack 是你自己的代码！不是我！

好吧，这更有意义

使用你添加的.transition 东西——你如何让它变得透明？现在我想让一个新的视图向上滑动，用某种颜色覆盖整个空间，并且它周围有一个白色区域，从过渡的东西把它拉起来。如果有帮助，我可以发布一个代码示例。