[SwiftUI]ざっくり分かる「トランジション」とは

どうも、ちょげ（@chogetarou）です。

この記事では、トランジションについて解説します。

トランジションとは

SwiftUIで、画面が表示、もしくは非表示になる際にアニメーションをつけることを「トランジション」と言います。

例えば、画像を表示する際に、画像が横から出てきたり、小さい状態から拡大されることがありますよね。

SwiftUIでは、そういったアニメーションをトランジションと呼んでいるのです。

transitionモディファイア

「トランジション」は、transitionモディファイアで設定します。

transitionモディファイアの定義は次のようになっています。

func transition ( _ t : AnyTransition) -> some View

• AnyTransition構造体を利用して、アニメーションを指定する

transitionモディファイアは、引数で「どのようなアニメーションにするか？」を、AnyTransition構造体を使って指定します。

指定できるトランジションは多くあります。

代表的なのは、次のようなプロパティやメソッドです。

• .slide: 左から右に現れ、消えていくアニメーション
• .opacity: 透明な状態から現れ、消えていくアニメーション
• .scale: 表示する際には大きくなり、消える際には小さくなっていくアニメーション
• .move(edge: Edge): edgeで指定した箇所から現れ消えていくアニメーション
  　　　　　　　　　　（edgeの例）.top , .bottom , .leading, .trailing

他にも、アニメーションを組み合わせるcombineメソッドや表示・非表示で違うアニメーションをするasymetricメソッドがあります。

transitionモディファイアは、表示・非表示がある画面につけることでアニメーションが追加されます。

ライブモードでは、トランジションが確認できないことがあるようです。

実際に試してみる際には、シミュレーターや実機で試してください。

まとめ

トランジションは、画面の表示・非表示が切り替わる際のアニメーションです。

トランジションは、.transitionモディファイアを使うことで設定できます。

参考：　金田浩明「SwiftUI 徹底入門」