【问题标题】:How can I reverse the slide transition for a SwiftUI animation?如何反转 SwiftUI 动画的幻灯片过渡?
【发布时间】:2021-12-08 06:58:33
【问题描述】:

我正在处理一系列屏幕,这些屏幕应该在按下按钮时发生变化,并且应该从右向左滑入/滑出。
除了.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()
                }
            }
    }
}

【问题讨论】:

标签: ios swift iphone swiftui swiftui-animation


【解决方案1】:

@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))}
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-09-25
    • 2014-01-12
    • 2011-08-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-20
    • 2012-02-22
    相关资源
    最近更新 更多