SwiftUIではビューに対してアニメーション効果を付ける方法がいくつも用意されている。

その中から今回は、ButtonやToggleなどを押し状態変数の値が切り替わると同時にアニメーションを実行させる例を紹介する。

サンプルコード

以下はToggleの切り替えに合わせて、Textビューを表示させるコード。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
struct ContentView: View {
    @State private var showingSwiftUI = false
     
    var body: some View {
        VStack {
            Toggle(isOn: $showingSwiftUI.animation()) {
                Text("Animation Toggle label")
            }
             
            if showingSwiftUI {
                Text("Hello SwiftUI!")
            }
        }.padding()
    }
}

ポイントは6行目。

ToggleのisOn引数に状態変数をバインドしているのだが、この状態変数にanimation()モディファイアを付けている。

これはBinding構造体に用意されているメソッドで、状態変数の値に変化があった時にアニメーションが実行される仕組みとなっている。

これを利用して、ToggleのほかButtonやSliderなどでも同じようなアニメーションを簡単に実装することができる。