<SwiftLearn/>
SwiftUI入門 レッスン8

アニメーション

withAnimation・transition・matchedGeometryEffect を使って滑らかな UI アニメーションを実装します。

SwiftUI のアニメーション

SwiftUI のアニメーションは状態変化に対して自動的に補間を行います。withAnimation { } で状態変更をラップするか、.animation(_:value:) モディファイアを使います。.transition(_:) はビューの追加・削除時のアニメーション、matchedGeometryEffect はビュー間のシームレスな遷移を実現します。

  • withAnimation(.spring()) — スプリングアニメーション
  • .easeInOut(duration:) — イーズイン・アウト
  • .transition(.slide) — スライドトランジション
  • matchedGeometryEffect(id:in:) — ヒーロートランジション

例1: withAnimation の基本

Swiftエディタ

例2: transition でビューの出現・消滅

Swiftエディタ

例3: matchedGeometryEffect によるヒーロー遷移

Swiftエディタ