[SwiftUI]Toggleでアニメーションをするには？

SwiftUI

2022.03.03

どうも、ちょげ(@chogetarou)です。

Toggleボタンでアニメーションをする方法を紹介します。

方法
使用例

方法

Toggleでアニメーションするには、animation()を使います。

具体的には、Toggleの引数「isOn」の値に、「.animation()」を付与します。

Toggle("Switch", isOn: $isOn.animation())

Toggleの引数「isOn」に「.animation()」を付与することで、値の変化で影響を受けるビューでアニメーションが起こります。

また、アニメーションの挙動を指定したい場合は、animationの引数に指定します。

//アニメーションの挙動は、animationの引数に「.〇〇」を指定
Toggle("Switch", isOn: $isOn.animation(.〇〇))

使用例

struct ContentView: View {
    
    @State var isOn = false
    
    var body: some View {
        VStack {
            Toggle("Switch", isOn: $isOn.animation(.easeInOut(duration: 1)))
                .padding()
            
            if isOn {
                Text("Switch is ON.")
            }
        }
    }
    
}