Переход SwiftUI с соответствующей анимацией

Question

Я новичок в SwiftUI и пытаюсь заставить работать простую анимацию. Вот что я хочу: одна кнопка на экране, при нажатии на нее появляется какой-то текст.

Я использую AnyTransition.offset и AnyTransition.animation api, чтобы управлять анимацией с задержкой 5 секунд. Но он появляется, когда я нажимаю. хорошо, если я изменю AnyTransition.offset на AnyTransition.opacity, он начнет работать. Зачем? Вот код, очень простой.

import SwiftUI

struct ContentView: View {
    @State private var show = false
    
    var body: some View {
        VStack {
            Spacer()
            
            if show {
                Text("AAAA")
                    .transition(
                        AnyTransition
                            .offset(x: 100, y: 100)
                            //                            .opacity
                            .animation(
                                Animation
                                    .easeInOut(duration: 1)
                                    .delay(5)
                        )
                )
            }
            
            Spacer()
            
            Button("Click") {
                self.show.toggle()
            }
            .padding()
        }
    }
}

Answer 1

Это должен быть контейнер, который анимирует контент при его удалении или добавлении. Итак, вот возможное решение для вашего перехода.

Протестировано с Xcode 11.4 / iOS 13.4

демо

VStack {
    if show {
        Text("AAAA")
            .transition(
                AnyTransition
                    .offset(x: 100, y: 100)
    //                            .opacity
        )
    }
}
.animation(Animation
            .easeInOut(duration: 1)
            .delay(1)     // decreased for testing
)

Answer 2

Вот что я хочу: одна кнопка на экране, при нажатии на нее появляется какой-то текст.

Зачем это так сложно? Просто используйте модификатор opacity, который проверяет состояние, и следуйте за ним с помощью animation.

См. Здесь:

struct ContentView: View {
    
    @State private var show = false
    
    var body: some View {
        VStack {
            Spacer()
            
            //Opacity that checks if show is true/ false and an animation on the text
            Text("AAAA").opacity(self.show ? 1 : 0).animation(.easeIn)
            
            Spacer()
            
            Button("Click") {
                self.show.toggle()
            }
            .padding()
        }
    }

}

Производит это:

введите описание изображения здесь