transitionを活用したアニメーション効果の追加方法

iOS	13.0以上
XCode(当サイトの環境)	15.0.1

SwiftUIでは、transitionを使ってビューの変更時にアニメーションを追加することができます。この機能を活用することで、ビューの追加や削除、表示/非表示の切り替えなどにアニメーション効果を簡単に追加できます。

どのような時に使用される？
1. アニメーションの種類
transitionとanimationの違いは？
まとめ

どのような時に使用される？

transitionは、特定のビューの状態が変化した際に、その変化にアニメーションを適用するために使用されます。
具体的には、ビューが追加されたり、削除されたり、あるいは表示/非表示が切り替わったりする際に、アニメーション効果を提供します。

例えば、以下のようにtransitionを使ってTextビューを表示・非表示する際に、スライドするアニメーションを適用することができます。

import SwiftUI

struct AnimationSmpView2: View {
    @State private var isAnimating = true

    var body: some View {
        VStack {
            // Circleの表示／非表示を切り替える
            if isAnimating {
                Circle()
                    .transition(.slide)
            }
            // ボタンを押してフラグの状態を変更
            Button(action: {
                withAnimation {
                    self.isAnimating.toggle()
                }
            }) {
                HStack {
                    Text("Button")
                    Image(systemName: "circle.dotted")
                }
            }
        }
    }
}

slide

この例では、Textビューが表示・非表示になる際に.slideというトランジションを適用しています。.slideは、ビューが表示される際にスライドするトランジション効果を提供します。

アニメーションの種類

.slide
.scale
.opacity
.move(edge: .bottom)

transitionを使うと、表示されるビューの変更に対してアニメーションを簡単に適用できます。他にも様々なトランジション効果が用意されており、ビュー間の変更時にアニメーションをカスタマイズすることができます。

scale

opacity

move

transitionとanimationの違いは？

transitionはビューの変更時にトランジション効果を提供し、ビューの追加/削除時や表示/非表示の切り替え時に使われます。一方、animationは特定のビューのプロパティが変更された際にその変更に対してアニメーションを追加します。

transition：ビューの追加や削除、表示/非表示の切り替えなど、ビューの変更時にアニメーションを適用するための機能です。具体的には、ビューの表示状態の変化に対して、トランジション効果を提供します。例えば、ビューの追加時にスライドするアニメーションを追加することができます。
animation：特定のビューのプロパティの変更時にアニメーションを適用するための機能です。animationを使用することで、例えばビューのサイズや色、位置などのプロパティが変更された際にアニメーションを追加することができます。