代码之家 › 专栏 › 技术社区 › Ahmed Zaidan

快速ui转换无法按预期工作

transition swiftui animation swift

Ahmed Zaidan · 技术社区 · 2 年前

你好,我正在尝试进行一个快速的ui转换,点击一个按钮,视图1将从屏幕底部向下滑动,视图2从顶部向下滑动到屏幕中。如果显示视图2,则当视图1从屏幕底部向上滑动时,视图2将从屏幕顶部向上滑动。我试着用自定义转换来实现这一点,但这些都不起作用。在动画中包装bool更改也不起作用。我该怎么解决这个问题?

import SwiftUI

extension AnyTransition {
    static var moveOne: AnyTransition {
        AnyTransition
            .asymmetric(
                insertion: .move(edge: .bottom),
                removal: .move(edge: .top)
            )
    }
    static var moveTwo: AnyTransition {
        AnyTransition
            .asymmetric(
                insertion: .move(edge: .top),
                removal: .move(edge: .bottom)
            )
    }
}

struct SwiftUIView: View {
    @State var show = true
    var body: some View {
        if !show {
            Rectangle().fill(.red.gradient).frame(width: widthOrHeight(width: true) * 0.8, height: widthOrHeight(width: false)).transition(.moveOne)
                .onTapGesture {
                    show.toggle()
                }
        } else {
            Rectangle().fill(.blue.gradient).frame(width: widthOrHeight(width: true) * 0.8, height: widthOrHeight(width: false)).transition(.moveTwo)
                .onTapGesture {
                    show.toggle()
                }
        }
    }
}

func widthOrHeight(width: Bool) -> CGFloat {
    let scenes = UIApplication.shared.connectedScenes
    let windowScene = scenes.first as? UIWindowScene
    let window = windowScene?.windows.first
    
    if width {
        return window?.screen.bounds.width ?? 0
    } else {
        return window?.screen.bounds.height ?? 0
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

1 回复 | 直到 2 年前

Sweeper 2 年前

你误解了 不对称 过渡是。

蓝色视图的过渡为:

消失时向下移动
出现时向上移动

红色视图的转换为:

消失时向上移动
出现时向下移动

这些是完全 对称的 -视图出现的动画与视图消失的动画完全相反!

因此,您所需要做的就是传递视图在出现 ,对称性会自动计算出它在消失时应该做什么。红色视图向下移动,蓝色视图向上移动。

包装 withAnimation ,您可以:

if !show {
    Rectangle().fill(.red)
        .frame(...)
        .transition(.move(edge: .bottom))
        .onTapGesture {
            withAnimation {
                show.toggle()
            }
        }
} else {
    Rectangle().fill(.blue)
    .frame(...)
    .transition(.move(edge: .top))
        .onTapGesture {
            withAnimation {
                show.toggle()
            }
        }
}

附带说明,我不建议这样计算框架。试着找到一种更SwiftUI的方式来做你想做的任何布局。