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

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 徹底入門」

コメント

タイトルとURLをコピーしました