【SwiftUI】アニメーションの基本

SwiftUIではViewの変化を簡単にアニメーション化できます。
本記事ではアニメーションの基本について解説します。

スポンサーリンク

環境

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

【Xcode】11.5
【Swift】5.2.4
【iOS】13.5
【macOS】Catalina バージョン 10.15.4

Viewにアニメーションを適用する

アニメーションの適用にはanimationモディファイアを使います。
Viewにアニメーションを適用すると、形状やエフェクトの変更がアニメーション化されます。

引数に指定したAnimation構造体のインスタンスで、アニメーションの種類を設定します。
.defaultを指定するとデフォルトのアニメーションが適用されます。
(アニメーションの種類については別の記事で紹介します。)

使用例

「アニメーション」ボタンをクリックすると、青い円がアニメーションを伴って、拡大・縮小します。

Viewにアニメーションを適用する

追加解説

animationモディファイアは一度に複数のModifierをアニメーション化できます。
注意点として、アニメーション化するModifierはanimationモディファイアよりも前に実行しなければいけません。

Viewにアニメーションを適用する方法は、大量のViewオブジェクトに同じ視覚効果を与えるのには不向きです。
また、コンテナビューにanimationモデファイアを適用するのは、スコープが制限されなくなる場合があるため、推奨されません。

条件付きアニメーション

引数(value)で指定したプロパティが変更された時のみ、Viewをアニメーション化します。
監視されるプロパティはあくまでアニメーションを有効にするか否かの判断に使うだけですので、アニメーション化の範囲は、このプロパティ以外の変化も含みます。

プロパティの変化にアニメーションを適用する

withAnimation関数を使うと、特定のViewではなく、プロパティの変化を明示的にアニメーション化できます。
同じプロパティが関連する複数のViewをアニメーション化する場合に役立ちます。

引数に指定したAnimation構造体のインスタンスでアニメーションの種類を設定します。
デフォルト値が規定されてる為、引数無しの場合はデフォルトのアニメーションが適用されます。
nilが指定された場合は、アニメーションは実行されません。

使用例

「アニメーション」ボタンをクリックすると、2つの円がアニメーションを伴って、拡大・縮小します。

プロパティの変化にアニメーションを適用する

Bindingプロパティにアニメーションを適用する

プロパティの更新が、Toggleなどの画面部品オブジェクトの中で行われる場合は、バインドするプロパティに直接animationモディファイアを適用できます。

このケースも、デフォルト値が規定されてる為、引数無しの場合はデフォルトのアニメーションが適用されます。
nilが指定された場合は、アニメーションは実行されません。

使用例

Toggleボタンをクリックすると、2つの円がアニメーションを伴って、拡大・縮小します。

Bindingプロパティにアニメーションを適用する

アニメーション処理のキャンセル

Viewにanimation(nil)モディファイアを適用すると、それより前に適用されたModifierのアニメーション処理を全てキャンセルします。

withAnimationやanimation()にてバインドされたプロパティを変更すると、そのプロパティにかかわるすべてのViewがアニメーション化の対象となりますが、animation(nil)モディファイアを使って、一部のViewを対象外にできます。

使用例

Toggleボタンをクリックすると、2つの円が拡大・縮小しますが、右側の円はアニメーション処理を伴いません。

あわせて読みたい記事

【SwiftUI】アニメーション効果の種類
本記事ではSwiftUIで使えるアニメーション効果の種類について解説します。アニメーション効果はAnimation構造体で定義します。