XCode 12.4 日本語化計画：Swift Tutorials

セクション 4

ビューの移行をカスタマイズする




デフォルトでは、ビューはフェードインおよびフェードアウトすることで画面上と画面外に移行します。この移行は、transition(_:) 修飾子を使用してカスタマイズできます。


































ステップ 1

条件付きで表示される HikeView に transition(_:) 修飾子を追加します。




---




これで、グラフが表示されたり、隠れたりして見えたり見えなくなったりします。








ステップ 2

今追加したトランジションを AnyTransition の静的プロパティとして抽出し、ビューのトランジション修飾子で新しいプロパティにアクセスします。




---




これにより、カスタムトランジションを展開するときにコードがクリーンに保たれます。

















ステップ 3

move(edge:) の移行を使用に切り替えて、グラフが同じ側から入ったり出たりするようにします。














ステップ 4

asymmetric(insertion:removal:) 修飾子を使用して、ビューが表示されたり隠れたりするときのさまざまな移行を提供します。

    HikeView.swiftt

34. if showDetail {
35. HikeDetail(hike: hike)
.transition(.slide)
36. }
37. }
38. }
39. }

HikeView.swiftt の 3 行目の後に以下のように書き足し、transition の部分を以下のように書き換えます。

    HikeView.swiftt

1. import SwiftUI
extension AnyTransition {
static var moveAndFade: AnyTransition {
AnyTransition.slide
}
}
3. struct HikeView: View {
4. var hike: Hike

40. if showDetail {
41. HikeDetail(hike: hike)
.transition(.moveAndFade)
42. }
43. }

上記の 5 行目を以下のように書き換えます。

    HikeView.swiftt

3. extension AnyTransition {
4. static var moveAndFade: AnyTransition {
AnyTransition.move(edge: .trailing)
5. }
6. }

さらに 5 行目移行を以下のように書き換えます。

    HikeView.swiftt

3. extension AnyTransition {
4. static var moveAndFade: AnyTransition {
let insertion = AnyTransition.move(edge: .trailing)
.combined(with: .opacity)
let removal = AnyTransition.scale
.combined(with: .opacity)
return .asymmetric(insertion: insertion, removal: removal)
5. }
6. }