【SwiftUI】トランジション(transition)の使い方

Viewオブジェクトの表示・非表示切り替えに伴うアニメーションをトランジション(transition)と呼びます。
SwiftUIでは、トランジション用に通常のアニメーション処理とは別の仕組みが用意されています。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.5
【Swift】5.2.4
【iOS】13.5
【macOS】Catalina バージョン 10.15.4
スポンサーリンク

基本的な使い方

トランジションを使うには、対象のViewにtransitionモデファイアを適用します。

引数のAnyTransition構造体で、トランジション専用のアニメーションを定義します。
定義可能なアニメーションタイプは以下の通りです。

.slide
左からスライドして出現し、右へスライドして消えていきます。

.opacity
透明な状態からだんだん出現し、消える時もだんだんと透明になっていきます。

.scale
拡大しながら表示、縮小しながら消えていきます。

.scale(scale: CGFloat, anchor: UnitPoint = .center)
拡大しながら表示、縮小しながら消える効果を細かく指定できます。
第1引数(scale)には、拡大・縮小の倍率、第2引数(anchor)には、変化の起点となる位置をUnitPoint構造体で指定します。
anchorが未指定時のデフォルト値は.centerです。

.move(edge: Edge)
引数(edge)で指定された方向(.top、.leading、.bottom、.trailingのいずれか)から表示、同方向へ消えていきます。

.offset(CGSize)
CGSize構造体で指定されたオフセット位置から移動しながら表示、同じ位置へ移動しながら非表示になります。

.offset(x: CGFloat = 0, y: CGFloat = 0)
上と同様の効果。オフセット位置を、数値で直接指定します。

.identity
トランジション効果を行いません。

動作条件

動作条件として、Viewの表示・非表示切り替えを行うプロパティに対して明示的にアニメーションが適用されている必要があります。
「プロパティに対して」の部分がポイントです。Viewに対して暗黙的なanimationが適用されているだけでは、トランジションが機能しないケースがあります。

【SwiftUI】transition効果が機能しないケース
Viewオブジェクトの表示・非表示の切り替え時のアニメーションを定義するtransitionモディファイアは、animationとセットで使用する必要があります。しかしながら、animationの指定方法によってtransitionが正し...

なお、animationで指定した効果と、transitionで指定した効果は合成されます。

使用例

「トランジション」ボタンをタップすると、青い円が右へスライドしながら消えていきます。
再びタップすると左から現れます。

トランジション(transition)の使用例

スポンサーリンク

transitionの合成(combined)

AnyTransition構造体のインスタンスは、combindモデファイアでトランジション効果を合成できます。
複数重ねての適用もできます。

引数(width)で重ねて合成するトランジション効果を定義します。

combined()メソッドはAnyTransition構造体のインスタンスに対して呼び出されるので、AnyTransitionの型を明示的に指定する必要があります。

使用例

次のコードは、opacityとoffsetを合成した例です。
透明度を変えながら右下に消えていき、再び右下から現れます。

スポンサーリンク

非対称トランジション(asymmetric)

asymmetricメソッドを使うと、Viewの表示と非表示で異なるトランジション効果を適用できます。

第1引数(insertion)で、表示時のトランジション効果を指定。
第2引数(removal)で、非表示時のトランジションを指定します。

使用例

次のコードは、拡大しながら表示し、右へスライドしながら消えていくサンプルです。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】カスタム・トランジション(transition)の作成
Viewオブジェクトの表示・非表示の切り替えアニメーションを定義するトランジション(transition)ですが、標準以外の、オリジナルのトランジションが作成できます。
【SwiftUI】transition効果が機能しないケース
Viewオブジェクトの表示・非表示の切り替え時のアニメーションを定義するtransitionモディファイアは、animationとセットで使用する必要があります。しかしながら、animationの指定方法によってtransitionが正し...
【SwiftUI】アニメーションの基本
SwiftUIではViewの変化を簡単にアニメーション化できます。本記事ではアニメーションの基本について解説します。
【SwiftUI】アニメーション効果の種類
本記事ではSwiftUIで使えるアニメーション効果の種類について解説します。アニメーション効果はAnimation構造体で定義します。
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信