如何在条件视图上为视图转换设置动画？

Question

设置非常简单：

State/Observable/Computet属性，姑且称之为S1
依赖于 S1

V1

V2

必须满足以下条件：

V1 应该有一个 in/out 的过渡并且是动画的
其他视图（例如 V2）在 S1 更改时不得设置动画
V2 可由其他状态设置动画（例如 S2）

一些后果：

在 S1 上使用 withAnimation { .. } 也会导致动画 V2 除非此处使用 .animation(nil).
但是，V2.animation(nil) 不是一个选项，因为它们仍然需要由其他状态变量设置动画 S2。
因此我排除了withAnimation { .. }

我准备了下面的例子：

struct Test: View {
    @State private var S1: Bool = false
    @State private var S2: Bool = false
    
    func VX(_ text: String, color: Color = .red) -> some View {
        Text(text).padding(10).background(color).padding(10)
    }
    
    var transition: AnyTransition {
        .move(edge: .top).combined(with: .opacity)
    }
    
    var body: some View {
        VStack {
        
            if S1 {
                VX("V1")
                    .transition(transition)
                    .animation(.easeOut, value: S1) // <--- not working
            }
            
            VX("V2", color: S2 ? .red : .blue)
                .offset(x: S1 ? 30 : 0)
            
            Spacer()
            
            HStack {
                Button(action: changeS1) {
                    Text("Change S1")
                }
                
                Button(action: changeS2) {
                    Text("Change S2")
                }
            }
        }
    }
    
    func changeS1() {
        S1.toggle()
    }
    
    func changeS2() {
        S2.toggle()
    }
}

我认为他们实现动画的方式不起作用，因为视图是由同一个变量有条件地插入的，因此在值 (S1) 发生变化时不存在，因此 .animation(.., value: S1) 无法检测到任何变化，因此不会出现动画。

所以问题是：如何根据同时确定其条件存在的变量为视图的转换设置动画？

感谢任何想法 - 谢谢！

Answer 1

.animation 修饰符应该应用于拥有条件视图的容器，因此它可以动画化 appear/disapper 过渡，例如

    VStack {
    
        if S1 {
            VX("V1")
                .transition(transition)
        }
       // ... other code
    }
    .animation(.easeOut, value: S1) // < here !!

如何在条件视图上为视图转换设置动画？

How to animate a view transition on a conditional view?

swift

swiftui

swiftui-animation

swiftui-transition