[SwiftUI]表示・非表示(show and hide)の切り替えでスライドアニメーション(slide animation)をするには？

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

ビューの表示・非表示が切り替わる際に、スライドアニメーションをする方法を紹介します。

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

方法

表示・非表示の切り替えでスライドアニメーションをする方法は、２つあります。

AnyTransition.slide

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

まず、表示・非表示が切り替わるビューにtransition修飾子を付与します。

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

ExampleView()
    .transition(.slide)

あとは、表示と非表示を切り替える処理をwithAnimation内で呼び出します。

withAnimation {
    //表示・非表示を切り替える
}

使用例

struct ContentView: View {
    @State var isShow = false
    var body: some View {
        VStack {
            if isShow {
                Rectangle()
                    .frame(width: 200, height: 200)
                    .transition(.slide)
            }
            
            Button("Switch") {
                withAnimation {
                    self.isShow.toggle()
                }
            }
        }
    }
}

AnyTransition.move

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

まず、表示・非表示を切り替えるビューにtransition修飾子を付与します。

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

moveの引数「edge」には、ビューが出てくる位置を指定します。

ExampleView()
    .transition(.move(edge: position)) //edgeにはビューが出てくる位置

あとは、表示・非表示を切り替える処理をwithAnimation内で呼び出します。

withAnimation {
    //ビューの表示・非表示を切り替える
}

AnyTransition.moveを使った場合は、スライドしてビューが出てくる位置と出ていく位置が同じになります。

もし、スライドして出てくる位置と出ていく位置を別々にしたい場合は、asynmetricをつかいます。

使用例

struct ContentView: View {
    @State var isShow = false
    var body: some View {
        VStack {
            if isShow {
                Rectangle()
                    .frame(width: 200, height: 200)
                    .transition(.move(edge: .trailing))
            }
            
            Button("Switch") {
                withAnimation {
                    self.isShow.toggle()
                }
            }
        }
    }
}