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

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

サンプルコード

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

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などでも同じようなアニメーションを簡単に実装することができる。