在SwiftUI中如何实现动画效果的绑定？

Question

我有以下代码，它会根据Binding<Bool>部分显示或隐藏Test视图。我可以将testVisible.toggle()调用包装在withAnimation中，但理想情况下，即使没有任何withAnimation，我也希望确保visible绑定始终具有动画效果。如何确保每次更改visible绑定时都会进行动画处理？

struct ContentView: View {
    @State var testVisible: Bool = true
    
    var body: some View {
        ZStack {
            Color.white
                .onTapGesture {
                    testVisible.toggle()
                }
            
            Test(visible: $testVisible)
        }
            
    }
}

struct Test: View {
    @Binding var visible: Bool
    
    var body: some View {
        Text("Test")
            .opacity(visible ? 0.5 : 0)
    }
}

- BenJacob

Answer 1

在 Text 视图中添加 .animation() 修改器：

struct Test: View {
    @Binding var visible: Bool
    
    var body: some View {
        Text("Test")
            .opacity(visible ? 0.5 : 0)
            .animation(.linear(duration: 0.5))
    }
}

- vacawama

Answer 2

在iOS 15和macOS 12中，简单的.animation()修改器已被弃用。您需要添加一个基于该动画的值：

struct Test: View {
    @Binding var visible: Bool
    
    var body: some View {
        Text("Test")
            .opacity(visible ? 0.5 : 0)
            .animation(.linear(duration: 0.5), value: visible)
    }
}

- kaevinio

Answer 3

你犯了一个错误，在“Test: View”中应该是一个“let visible”，而不是一个“@Binding var”。 “let”用于读取访问，而“@Binding var”用于需要写入访问的情况，而你并不需要。这个版本可以正确地进行动画淡入淡出：

    struct ContentView3: View {
        @State var testVisible: Bool = true
        
        var body: some View {
            ZStack {
                Color.white
                    .onTapGesture {
                        withAnimation {
                            testVisible.toggle()
                        }
                        
                    }
                
                Test(visible: testVisible)
            }
            
        }
    }
    
    struct Test: View {
        let visible: Bool
        
        var body: some View {
            Text("Test")
                .opacity(visible ? 0.5 : 0)
        }
    }

- malhal