在SwiftUI中动画添加/删除视图

x33g5p2x  于 2022-12-17  发布在  Swift
关注(0)|答案(1)|浏览(196)

我已经创建了一个底部警报,我想动画时,它是要提出或删除。目前它没有做任何动画,只有显示和删除自己需要时。
我尝试在实际视图上使用.transition(.move(edge: .bottom)),但没有显示动画。
如何为该视图添加向上/向下滑动动画?

var body: some View {
    ZStack {
        VStack {
            toolbar
            Spacer()
            switch viewModel.status {
            case .loading:
                LoadingView(isAnimating: $isLoading)
            case .loaded(_):
                productView
            case .error(_):
                Text("Please Retry.")
                    .onAppear {
                        buildBottomAlert(type: .error)
                    }
            }
        }
        
        VStack {
            Spacer()
            if let bottomView = bottomAlertView {
                bottomView
                    .transition(.move(edge: .bottom))
            }
        }
        }
}

底部警报生成器

func buildBottomAlert(type: BottomAlertType) {
    self.bottomAlertView = BottomAlert(type: type)
    self.showBottomAlert = true
    DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
        self.removeBottomAlert()
    }
}

func removeBottomAlert() {
    bottomAlertView = nil
    showBottomAlert = false
}
mccptt67

mccptt671#

对于动画,您需要将显示/隐藏代码添加到withAnimation函数的主体中。

withAnimation {
    buildBottomAlert(type: .error)
}

另外,像这样更新您的buildBottomAlert函数。

func buildBottomAlert(type: BottomAlertType) {
    self.bottomAlertView = BottomAlert(type: type)
    self.showBottomAlert = true
    Task {
        //Sleep for 2 seconds
        try await Task.sleep(nanoseconds: 2_000_000_000)
        withAnimation {
            removeBottomAlert()
        }
    }
}

**注意:**我使用了sleep(nanoseconds:)而不是asyncAfter(deadline:execute:)

相关问题