[SwiftUI]画面遷移でスライドダウンアニメーションをするには？

どうも、ちょげ(@chogetarou)です。

画面遷移で上から下にスライドするアニメーションをする方法を紹介します。

方法

画面遷移でスライドダウンアニメーションをするには、AnyTransition.moveを使います。

まず、画面遷移先にtransition修飾子を付与します。

そして、transition修飾子の引数には、「.move(edge: .top)」を指定します。

SecondView(・・・)
   .transition(.move(edge: .top))

あとは、画面遷移の処理をwithAnimation内に入れます。

withAnimation {
    //画面遷移
}

SecondView(isShow: $isShow)
    .transition(.asymmetric(
         insertion: .move(edge: .top),
         removal: .move(edge: .bottom))
    )

使用例

struct ContentView: View {
    @State var isShow = false
    var body: some View {
        ZStack {
            VStack {
                Button(action: {
                    withAnimation {
                        self.isShow.toggle()
                    }
                }) {
                    Text("Navigate")
                }
            }
            
            if isShow {
                SecondView(isShow: $isShow)
                    .transition(.move(edge: .top))
            }
        }
    }
}

struct SecondView : View {
    @Binding var isShow : Bool
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.black)
            VStack {
                Button("Back") {
                    withAnimation {
                        self.isShow.toggle()
                    }
                }
            }
        }
    }
}

[SwiftUI]アニメーションを移動に追加するには？

[SwiftUI]Buttonにタップアニメーションを付けるには？

[SwiftUI]Toggleでアニメーションをするには？

[SwiftUI]フェードインのアニメーションをする方法