【SwiftUI】カスタム・トランジション(transition)の作成

Viewオブジェクトの表示・非表示の切り替えアニメーションを定義するトランジション(transition)ですが、標準以外の、オリジナルのトランジションが作成できます。

スポンサーリンク

環境

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

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

まずは既存のトランジションを作ってみる

トランジションのカスタマイズ方法を理解する為に、まずは既存の.scaleと同じトランジションを作ってみます。

トランジションを作るには、アニメーションの最初と最後を定義するModifierが必要です。
両方のModifierの違いがアニメーション化可能であれば、SwiftUIは残りの部分を補完します。

次のコードは、引数(size)でViewの拡大率を指定するカスタムModifier(MyScaleModifier)です。

続いて、AnyTransition構造体に新たなタイププロパティ(myScale)を拡張します。

myScaleプロパティは、AnyTransaction.modifierメソッドで生成されたAnyTransactionのインスタンスを返します。
modifier()メソッドの引数(active)と引数(identity)には、先程のカスタムModifierを使用して、表示アニメーションの最初の状態、と最後の状態を指定します。
非表示アニメーションでは、これらは逆に使用されます。

以上のコードで、次のカスタムトランジションが使えるようになります。
動作は既存の.scaleと同じです。

スポンサーリンク

カスタムトランジションに手を加える

前章で作成したカスタムトランジションに、回転の動きを加えてみましょう。

カスタムModifier(MyScaleModifier)に、View回転のエフェクトと引数を追加します。

呼び出し側の引数に、回転角度(degrees)を追加します。

以上の変更で回転しながら拡大するカスタムトランジション(.myScale)が完成です。
最終のコードを以下に示します。

【SwiftUI】カスタム・トランジション(transition)の作成
スポンサーリンク

あわせて読みたい記事

【SwiftUI】トランジション(transition)の使い方
Viewオブジェクトの表示・非表示切り替えに伴うアニメーションをトランジション(transition)と呼びます。SwiftUIでは、トランジション用に通常のアニメーション処理とは別の仕組みが用意されています。
【SwiftUI】カスタムModifierの作成
(2020/05/4 更新)SwiftUIでは、定形のModifierをまとめたカスタムModifierを作成できます。これは、繰り返し処理を避け、ソースの簡素化をはかるのに有効です。本記事では、カスタムModifierの定義方法と使用...
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信