【SwiftUI】.animationでアニメーションをつける方法

はじめに

この記事の主張

• .animation(_:value:)で値の変更を検知して、指定のアニメーションをViewに反映する
• アニメーションの種類を比較

本題

.animation(_:value:)で値の変更を検知して、指定のアニメーションをViewに反映する

実際にコードからみていきましょう。
以下のコードでは、円をタップすると、円のサイズが3倍に拡大/縮小されます。
拡大時/縮小時にアニメーションが入っています。

import SwiftUI

struct AnimationView: View {
    
    @State private var isLarge: Bool = false
    
    var body: some View {
        Button {
            isLarge.toggle()
        } label: {
            Circle()
                .frame(width: 100, height: 100)
                .scaleEffect(isLarge ? 3 : 1)
                .animation(.spring(), value: isLarge)
        }
    }
}

アニメーションを適用している箇所はここです。

.animation(.spring(), value: isLarge)

この場合、変数isLargeの変更を監視して、アニメーション.spring()を適用しています。

ボタンが押されたタイミングで、変数isLargeが変更されるため、その変更をトリガーにしてCircle()に.spring()アニメーションが反映されます。

アニメーションの種類を比較

以下、5つについてアニメーションを比較してみました。

• default
• linear
• easeInOut
• easeIn
• easeOut

default	linear	easeInOut	easeIn	easeOut

ease系は立ち上がりと立ち下がりで違うのがわかるかと思います。

アニメーションをさらに深掘りしたい皆様へ

（2024/10/16（水）追記）
アニメーションの種類について図解した記事をアップしました。

https://zenn.dev/z_ypi/articles/fcff494968a556

アニメーションの種類やパラメータによる動きの違いを動画を交えて紹介していますので、ぜひ参考にしてみてください。

まとめ

• .animation(_:value:)で値の変更を検知して、指定のアニメーションをViewに反映する
• アニメーションの種類を比較