[SwiftUI] Animation で画面を動かす方法

SwiftUI

SwiftUI では簡単に画面に動きをつけることができます。その方法を説明します。

Animation

SwiftUI になって、Animation という struct が導入されました。

Apple のドキュメントは、こちら

この Animation を使うことで、画面に動きをつけることが簡単にできるようになりました。

このような動きが数行のコードを追加することで実現できるようになりました。

画面に動きをつける

最初に、画面が変更されるような振る舞いが必要です。
例えば、ボタンを押したら、テキストの位置が変わるという振る舞いです。

以下のコードで試していきます。

animation base (without animation)

アニメーションの指定をつけていないいので、以下のような動作になります。

ボタンを押すと、.offset の位置指定が変更されるので、表示が切り替わっています。

ここに、アニメーション指定することで、表示がアニメーション付きで切り替わるようになります。

アニメーションの指定方法は、3つあります。

  • View に対して指定する方法
  • 一連のコード実行 (clousre) に対して指定する方法
  • Binding された変数に対して指定する方法

(View).animation

ビューに .animation modifier を指定することで、アニメーションするようになります。

以下のコードで実現しています。

view modifier でアニメーション

コード解説
  1. View に対して、.animation modifier を使って、アニメーションを指定しています。

1行追加するだけで、アニメーションが追加できました。

注意
アニメーション対象は、View 生成から、.animation までの範囲です。

.animation 指定後に、.offset 指定しても、何もアニメーションしません。

withAnimation

View ではなく、closure で実行されるコードの影響を アニメーションさせることもできます。

withAnimation でアニメーション
コード解説
  1. アニメーションの原因となる操作を withAnimation 指定しています

同じ Animation を指定しているので、動作は同じです。

例えば、同じ変数を参照しているすべてのビューをアニメーションさせたい時に便利です。

(Binding).animatiton

Binding 変数に直接指定することもできます。

Binding.animation でアニメーション
コード解説
  1. Binding 変数を操作するように Toggle を入れて、.animation 指定しています

まとめ: 画面に動きをつける方法

タイトル
  • アニメーションには、Animatino を使う
  • View modifier の .animation 指定されたビューがアニメーションする
  • withAnimation 指定された clousre の影響でアニメーションする
  • .animation 指定された Binding 変数の効果がアニメーションする

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です