【SwiftUI】トランジションの書き方

基本として。

import SwiftUI

struct TestTransition: View {
  @State private var active = false

  var body: some View {
    VStack {
      if active {
        Image(systemName: "face.smiling")
          .font(.system(size: 100))
          .transition(.slide)
        Image(systemName: "face.smiling")
          .font(.system(size: 100))
          .transition(.opacity)
        Image(systemName: "face.smiling")
          .font(.system(size: 100))
          .transition(.scale)
        Image(systemName: "face.smiling")
          .font(.system(size: 100))
          .transition(.slide.combined(with: .scale))
        Image(systemName: "face.smiling")
          .font(.system(size: 100))
          .transition(.asymmetric(insertion: .slide, removal: .scale))
      }

      Button(active ? "hide" : "show") {
        withAnimation {
          active.toggle()
        }
      }
      .buttonStyle(.borderedProminent)
    }
  }
}

#Preview {
  TestTransition()
#if os(macOS)
    .frame(width: 300, height: 600)
#endif
}

アニメーションと違って、withAnimation() トリガー限定で if 併用必須。

https://zenn.dev/maochanz/articles/b3f2b0dcf949c5

アニメーションとトランジションを組み合わせて使うと画面が生き生きします。

https://android.benigumo.com/20240822/swiftui-animation-transition/

https://x.com/maochanz/status/1827873597471199498

https://android.benigumo.com/20240827/speech-bubble/