簡體   English   中英

如何反轉 SwiftUI 動畫的幻燈片過渡?

[英]How can I reverse the slide transition for a SwiftUI animation?

我正在處理一系列屏幕,這些屏幕應該在按下按鈕時發生變化,並且應該從右向左滑入/滑出。
除了.slide過渡使它從前緣移入並移出到后緣之外,一切都運行良好。 (從左到右)
我想在不更改尾隨/前導的情況下反轉過渡動畫方向(至少不是在應用程序的整個上下文中)。

我嘗試將過渡更改為.move(edge: .trailing)但隨后視圖從同一方向移入和移出。

import SwiftUI

struct ContentView: View {
    enum screens {
        case start, mid, final
    }
    @State var curScreen: screens = .start
    
    func changeScreen() {
        switch curScreen {
        case .start:
            curScreen = .mid
        case .mid:
            curScreen = .final
        case .final:
            return
        }
    }
    
    var body: some View {
        switch curScreen {
        case .start:
            ScreenView(callback: changeScreen, text: "Start")
                .transition(.slide)
        case .mid:
            ScreenView(callback: changeScreen, text: "Mid")
                .transition(.slide)
        case .final:
            ScreenView(callback: {}, text: "Final")
                .transition(.slide)
        }
    }
}

struct ScreenView: View {
    let callback: () -> ()
    let text: String
    var body: some View {
        Text(text)
            .padding()
            .frame(maxWidth: .infinity)
            .onTapGesture {
                withAnimation(.default) {
                    callback()
                }
            }
    }
}

@Asperi已經回答了我的問題,但是當我搜索它時它沒有出現在 google 或 stackoverflow 上,所以這里再次為算法:

如何在 SwiftUI 中反轉幻燈片過渡:

摘自 Apple 開發者文檔:

static var slide: AnyTransition
// A transition that inserts by moving in from the leading edge, and removes by moving out towards the trailing edge.

也可以寫成:

AnyTransition.asymmetric(
    insertion: .move(edge: .leading),
    removal: .move(edge: .trailing)
)

因此,要反轉動畫只需翻轉insertionremoval並將其放入過渡 ViewModifier 中。

由於我需要多次使用它,因此我對AnyTransition進行了擴展,因此我可以調用.transition(.backslide)

extension AnyTransition {
    static var backslide: AnyTransition {
        AnyTransition.asymmetric(
            insertion: .move(edge: .trailing),
            removal: .move(edge: .leading))}
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM