SwiftUI Animation の種類とカスタマイズ

SwiftUI の Animation 型には、さまざまなプリセットとカスタマイズオプションが用意されている。アニメーションの種類を変えるだけで、アプリの印象は大きく変わる。

基本的なアニメーション種類

SwiftUI には 4 つの基本的なタイミング関数がある。

withAnimation(.linear) { }      // 一定速度
withAnimation(.easeIn) { }      // ゆっくり始まり、速く終わる
withAnimation(.easeOut) { }     // 速く始まり、ゆっくり終わる
withAnimation(.easeInOut) { }   // ゆっくり始まり、ゆっくり終わる

.default は .easeInOut に近い挙動で、多くの場面で自然に見える。

duration でアニメーション時間を指定

各アニメーションには duration パラメータで時間を指定できる。

.linear(duration: 0.3)
.easeIn(duration: 0.5)
.easeOut(duration: 1.0)
.easeInOut(duration: 0.8)

時間の単位は秒。短すぎると動きが見えず、長すぎるとユーザーを待たせてしまう。一般的な UI アニメーションでは 0.2〜0.5 秒程度が適切だ。

timingCurve でカスタムカーブ

ベジェ曲線の制御点を指定して、独自のタイミング関数を作れる。

// カスタムベジェ曲線
Animation.timingCurve(0.2, 0.8, 0.2, 1.0, duration: 0.5)

CSS の cubic-bezier と同じ概念なので、Web 開発経験があれば馴染みやすい。

speed でアニメーション速度を調整

既存のアニメーションの速度を倍率で変更できる。

Animation.easeInOut.speed(2.0)   // 2倍速
Animation.spring().speed(0.5)    // 半分の速度

元のアニメーションの特性を保ったまま、全体の速度だけを調整したい場合に便利だ。

delay でアニメーション開始を遅延

アニメーションの開始を遅らせる。

Animation.easeInOut.delay(0.3)  // 0.3秒後に開始

複数の要素を順番にアニメーションさせたいときによく使う。

ForEach(0..<5, id: \.self) { index in
    Rectangle()
        .frame(width: 50, height: 50)
        .offset(x: isAnimating ? 100 : 0)
        .animation(
            .easeOut.delay(Double(index) * 0.1),
            value: isAnimating
        )
}

各四角形が 0.1 秒ずつずれてアニメーションを開始し、ウェーブのような効果が生まれる。

アニメーションの組み合わせ

これらの修飾子は組み合わせて使える。

Animation
    .easeInOut(duration: 0.5)
    .delay(0.2)
    .speed(1.5)

読みやすさを考慮しつつ、目的の動きを実現するアニメーションを組み立てていく。

interpolatingSpring

iOS 17 では新しいスプリングアニメーションの作成方法が追加された。

Animation.interpolatingSpring(
    duration: 0.5,
    bounce: 0.3
)

duration で大まかな時間を、bounce で跳ね返りの強さ（0〜1）を指定する。従来の mass/stiffness/damping より直感的にスプリングを調整できる。

使い分けの指針

アニメーションの種類は「アプリの性格」を決める重要な要素だ。落ち着いた印象なら長めの easeInOut、活発な印象ならスプリングを多用するなど、一貫性を持たせることが大切である。