Как анимировать переход вида в условном представлении?

Question

Настройка довольно проста:

• Свойство State/Observable/Compute, назовем его
• Представления (, ), которые зависят от

Должны выполняться следующие условия:

• V1должен иметь переход для входа/выхода и быть анимированным
• Другие представления (например) не должны анимироваться при изменении
• анимируется другими состояниями (например, )

Некоторые последствия:

• С использованием withAnimation { .. }on также приведет к анимации 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модификатор должен применяться к контейнеру, владеющему условным представлением, чтобы он мог анимировать переход появления/исчезновения, например

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