[SwiftUI]画面遷移(page navigation)でスライドアニメーション(slide animation)をするには？

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

画面遷移にスライドするアニメーションを付与する方法を紹介します。

方法
1. AnyTransition.slide
2. AnyTransition.move
まとめ
1. 関連

方法

画面遷移でスライドアニメーションをする方法は、２つあります。

AnyTransition.slide

１つは、AnyTransition.slideを使う方法です。

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

そして、transition修飾子の引数に「.slide」を付与します。

SecondView()
    .transition(.slide)

あとは、画面遷移の処理をwithAnimation内で呼び出します。

withAnimation {
    //画面遷移
}

使用例

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(.slide)
            }
        }
    }
}

AnyTransition.move

もう１つは、AnyTransition.moveを使う方法です。

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

そして、transition修飾子の引数に「.move()」を付与します。

moveの引数「edge」には、ビューが表示される方向を指定します。

SecondView()
    .transition(.move(edge: positoion))

あとは、画面遷移の処理をwithAnimation内で呼び出します。

withAnimation {
    //画面遷移
}

使用例

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))
            }
        }
    }
}