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エディタ