アニメーションの追加方法

アニメーションは、ユーザー体験を向上させるための重要な要素です。SwiftUIでは、状態変化に応じたアニメーションを簡単に追加することができます。

iOS：13.0以上
XCode（当サイトの環境）：15.0.1

アニメーションの基本
アニメーションの種類
durationでアニメーションの動作速度を変更
withAnimationによる書き換え
まとめ

アニメーションの基本

以下のコードは、Circleビューのスケールを変更する際のアニメーションを追加する例です。

ここでのポイントは.animationの引数であるvalueの値です。valueに指定したプロパティ値（scale）の変化がアニメーションが動作するトリガーとなっています。

import SwiftUI

struct AnimationSmpView: View {
    @State private var scale = 0.5
    
    var body: some View {
        VStack {
            Circle()
                .scale(scale)
                .animation(.easeOut, value: scale)
            HStack {
                Button("+0.5") { scale += 0.5 }
                Button("-0.5") { scale -= 0.5 }
            }
        }
    }
}

@State private var scale = 0.5で、スケールを管理するためのscaleという状態プロパティを定義しています。このプロパティは、Circleのスケールを制御します。
Circle().scale(scale)によって、Circleのスケールをscaleの値によって変更しています。この変更にアニメーションを追加するために、.animation(.easeOut, value: scale)が使用されています。
HStackには2つのButtonがあり、それぞれscaleを+0.5と-0.5追加および減少させるための機能を提供します。
Buttonがタップされると、それぞれのボタンのクロージャー内でscaleの値が変更されます。これにより、Circleのスケールが変化し、アニメーションがトリガーされます。

アニメーションの種類

SwiftUIでは、様々なアニメーション効果を提供しています。それらの主な種類や種類の一部について見てみましょう。

.easeInOut: アニメーションの開始と終了が緩やかなスタート・ストップで行われます。最初はゆっくり始まり、次第に速度が上がっていき、最後にまたゆっくりとなります。
.linear: 一定の速度でアニメーションが行われます。一定のスピードで変化します。
.easeIn: アニメーションが緩やかに始まり、徐々に速度が上がっていきます。
.easeOut: アニメーションが速く始まり、徐々にスローダウンしていきます。

easeIn

easeOut

easeInOut

linear

durationでアニメーションの動作速度を変更

.easeInOut(duration: 2)など、durationを設定することでアニメーションの動作速度を指定することも出来ます。

import SwiftUI

struct AnimationSmpView: View {
    @State private var scale = 0.5
    
    var body: some View {
        VStack {
            Circle()
                .scale(scale)
                .animation(.easeInOut(duration: 2), value: scale)
            HStack {
                Button("+0.5") { scale += 0.5 }
                Button("-0.5") { scale -= 0.5 }
            }
        }
    }
}

これらのアニメーションの設定は、.animation()メソッドに渡すことで使用できます。

withAnimationによる書き換え

withAnimationは、SwiftUIでアニメーションを適用するための手段です。特定のアクションに対してアニメーションを実行したい場合に使用されます。

通常、withAnimationは@Stateプロパティの値を変更する処理の中で使われます。これにより、そのプロパティの変更にアニメーションが適用されます。

例えば、以下のコードでは、ボタンがタップされるとscaleの値が変更されます。scaleの変更に合わせて、アニメーションが適用されます。

import SwiftUI

struct AnimationSmpView: View {
    @State private var scale = 0.5
    
    var body: some View {
        VStack {
            Circle()
                .scale(scale)
            HStack {
                Button("+0.5") {
                    withAnimation { scale += 0.5 }
                }
                Button("-0.5") {
                    withAnimation { scale -= 0.5 }
                }
            }
        }
    }
}

withAnimationブロックは、アニメーションが実行されるコードを囲むことで、その中で行われる変更に対してアニメーションを適用するための手段です。