时间戳

首页 > 解决方案 > 如何使用 DispatchQueue 使视图在一段时间后出现和消失？

ios - 如何使用 DispatchQueue 使视图在一段时间后出现和消失？

问题描述

我想让一个视图出现，做一些事情，然后消失DispatchQueue。我想切换showHand以显示手，然后toggleHandAnimation使手左右移动。一段时间后，例如 5 秒，我希望那只手消失。

我在下面有一个实现，它似乎正在构建，但似乎会有更好的方法。我有下面的代码。

关于在不同时间点异步运行多个任务的视图实施指南是什么？

import SwiftUI

struct ContentView: View {
    @State var toggleHandAnimation: Bool = false
    @State var showHand: Bool = true
    
    var body: some View {
        if showHand {
            Image(systemName: "hand.draw")
                .font(Font.system(size: 100))
                .offset(x: toggleHandAnimation ? -40 : 0, y: 0)
                .animation(Animation.easeInOut(duration: 0.6).repeatCount(5))
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1, execute: {
                        toggleHandAnimation.toggle()
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 5, execute: {
                        showHand.toggle()
                        })
                    })
                }
        }
        
    }
}

在此处输入图像描述

标签： iosswiftui

解决方案

我认为这就是你要找的：

struct ContentView: View {
    @State var toggleHandAnimation: Bool = false
    @State var showHand: Bool = true
    
    var body: some View {
        ZStack {
            Color(uiColor: .systemBackground)
            if showHand {
                Image(systemName: "hand.draw")
                    .font(Font.system(size: 100))
                    .offset(x: toggleHandAnimation ? -40 : 0, y: 0)
                    .onAppear {
                        withAnimation(Animation.easeInOut(duration: 0.5).repeatCount(10)) {
                            toggleHandAnimation.toggle()
                        }
                        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 5, execute: {
                            showHand.toggle()
                        })
                    }
            }
        }
    }
}

有几件事，您应该阅读内在动画与外在动画。您试图使用内在的，但对于这种情况，它应该是外在的（即withAnimation(). 此外，.animation(_ animation:)已被弃用，因为它不能很好地工作。您应该使用.animation(_ animation:, value:).

另外，我调整了时间，以便动画结束并且手消失。使用 的withAnimation()好处是您可以为同一动画发生的多个事件设置动画。

如您所见，您不需要嵌套DispatchQueues. 您只需要一个就可以使视图消失。

最后，我把这一切都放在一个 ZStack 中并在上面设置颜色，这样总是有一个视图可以返回。原因是，如果突然没有返回视图，这将崩溃。这就是在没有颜色的动画结束时会发生的情况。显然，你可以有任何你想要的视图，这只是一个例子。

推荐阅读