SwiftUI | withAnimationの意味と使い方

SwiftUI

2022.09.112022.08.27

SwiftUIのwithAnimationの意味と使い方を説明する。

結論

withAnimationを使うと変化を滑らかに見せることができる。

具体例

ボタンをタップすると文字サイズが変化するAppを例に説明する。

withAnimation 無し

withAnimation 有り

withAnimation 有りで1秒かけて変化するように指定

コードを以下に示す。

withAnimation 無し

import SwiftUI

struct ContentView: View {
    @State private var 文字サイズ: CGFloat = 10

    var body: some View {
        Spacer()
        Text("俺はヨシヒコ")
            .font(.system(size: 文字サイズ))
        Spacer()
        Button("ボタン") {
            文字サイズ += 10
        }
        .padding()
        .buttonStyle(.borderedProminent)
    }
}

withAnimation 有り

import SwiftUI

struct ContentView: View {
    @State private var 文字サイズ: CGFloat = 10

    var body: some View {
        Spacer()
        Text("俺はヨシヒコ")
            .font(.system(size: 文字サイズ))
        Spacer()
        Button("ボタン") {
            withAnimation {  // ?
                文字サイズ += 10
            }
        }
        .padding()
        .buttonStyle(.borderedProminent)
    }
}

withAnimation 有りで1秒かけて変化するように指定するには、withAnimation(.linear(duration: 1))と記述する。

import SwiftUI

struct ContentView: View {
    @State private var 文字サイズ: CGFloat = 10

    var body: some View {
        Spacer()
        Text("俺はヨシヒコ")
            .font(.system(size: 文字サイズ))
        Spacer()
        Button("ボタン") {
            withAnimation(.linear(duration: 1)) {  // ?
                文字サイズ += 10
            }
        }
        .padding()
        .buttonStyle(.borderedProminent)
    }
}

次にボタンをタップすると背景色が変化するAppを例に説明する。

withAnimation 無し

withAnimation 有りで1秒かけて変化するように指定

withAnimation 無し

import SwiftUI

struct ContentView: View {
    @State private var 背景が黒: Bool = false

    var body: some View {
        ZStack {
            if 背景が黒 {
                Color.black
            }
            Button("ボタン") {
                背景が黒.toggle()
            }
            .padding()
            .buttonStyle(.borderedProminent)

        }
    }
}

withAnimation 有りで1秒かけて変化するように指定するには、withAnimation(.linear(duration: 1))と記述する。

import SwiftUI

struct ContentView: View {
    @State private var 背景が黒: Bool = false

    var body: some View {
        ZStack {
            if 背景が黒 {
                Color.black
            }
            Button("ボタン") {
                withAnimation(.linear(duration: 1)) {  // ?
                    背景が黒.toggle()
                }
            }
            .padding()
            .buttonStyle(.borderedProminent)

        }
    }
}