Swift Dispatch Main 同步使 UIView 动画混乱

Question

我遇到了一个问题，我的UIView 和Lottie-Animation 没有正确显示。我使用了很多 Dispatch.main.async，我很确定这会搞砸一切。

1. 用户点击Button 并立即显示我的UIVIew("coverView")+ Animation ("loadingAnimation")（调用setupLoadingAnimation）

ScreenVideo

但不是，它只是在另一个功能完成后才显示。

我必须如何以及在哪里调用animation.play() 和view.isHidden = false，以便在点击button 后立即显示？

这是我的结构：

@objc func addWishButtonTapped() {

    print("tapped 1")
    DispatchQueue.main.async { [weak self] in
        guard let self = self else { return }

        // ...
        self.setUpLoadingAnimation()
        // ...
        
        print("tapped 2")
        
        self.crawlWebsite {
            print("tapped 3")
            self.hideLoadingView()
            print("tapped 4")
        }

    }
}

视图未设置，它在print("tapped 2") 之后停止printing，仅打印print(tapped 3")。那是view+ loadingAnimatino 变得可见的时候。

Setup Loading Animation:

    //MARK: setupLoadingAnimation
func setUpLoadingAnimation(){
    
    DispatchQueue.main.async { [weak self] in
        guard let self = self else { return }
        self.view.addSubview(self.coverView)
        self.coverView.topAnchor.constraint(equalTo: self.wishView.topAnchor).isActive = true
        self.coverView.leadingAnchor.constraint(equalTo: self.wishView.leadingAnchor).isActive = true
        self.coverView.trailingAnchor.constraint(equalTo: self.wishView.trailingAnchor).isActive = true
        self.coverView.bottomAnchor.constraint(equalTo: self.wishView.bottomAnchor).isActive = true
        
        self.loadingAnimation.contentMode = .scaleAspectFit
        self.loadingAnimation.translatesAutoresizingMaskIntoConstraints = false
        self.coverView.addSubview(self.loadingAnimation)
        
        self.loadingAnimation.centerXAnchor.constraint(equalTo: self.coverView.centerXAnchor).isActive = true
        self.loadingAnimation.centerYAnchor.constraint(equalTo: self.coverView.centerYAnchor).isActive = true
        self.loadingAnimation.heightAnchor.constraint(equalToConstant: 100).isActive = true
        self.loadingAnimation.widthAnchor.constraint(equalToConstant: 100).isActive = true
        self.loadingAnimation.loopMode = .loop
        self.loadingAnimation.play()
    }
    
}

crawlWebsite:

    //MARK: crawlWebsite
func crawlWebsite(finished: @escaping () -> Void){
    
    var html: String?
    guard let url = self.url else { return }
    let directoryURL = url as NSURL
    let urlString: String = directoryURL.absoluteString! 
    // save url to wish
    self.wishView.link = urlString
 
    DispatchQueue.main.async { [weak self] in
        guard let self = self else { finished(); return }
        html = self.getHTMLfromURL(url: url)
        self.getContentFromHTML(html: html, url: url)
        self.getOpenGraphData(urlString: urlString) {
            finished()
        }
    }
}

我知道这很混乱，所以我希望一切都清楚！如果您有任何问题，请告诉我！我被困在这里了......

Answer 1

好像有多余的DispatchQueue.main.async调用

• 更好的办法是删除所有函数中的DispatchQueue.main.async，并在addWishButtonTapped() 中的DispatchQueue.main.async 中调用所有这些函数

您可以尝试以下更改：

@objc func addWishButtonTapped() {
  print("tapped 1")
  DispatchQueue.main.async { [weak self] in
    guard let self = self else { return }

     // ...
     self.setUpLoadingAnimation()
     // ...
    
    print("tapped 2")
    
    self.crawlWebsite {
        print("tapped 3")
        self.hideLoadingView()
        print("tapped 4")
       }
    }
}

并在setUpLoadingAnimation() 中删除DispatchQueue.main.async，因为此函数已在主线程中调用。你也可以在这个函数中做view.isHidden = false

//MARK: setupLoadingAnimation
func setUpLoadingAnimation(){  
    self.view.addSubview(self.coverView)
    self.coverView.topAnchor.constraint(equalTo: self.wishView.topAnchor).isActive = true
    self.coverView.leadingAnchor.constraint(equalTo: self.wishView.leadingAnchor).isActive = true
    self.coverView.trailingAnchor.constraint(equalTo: self.wishView.trailingAnchor).isActive = true
    self.coverView.bottomAnchor.constraint(equalTo: self.wishView.bottomAnchor).isActive = true
    
    self.loadingAnimation.contentMode = .scaleAspectFit
    self.loadingAnimation.translatesAutoresizingMaskIntoConstraints = false
    self.coverView.addSubview(self.loadingAnimation)
    
    self.loadingAnimation.centerXAnchor.constraint(equalTo: self.coverView.centerXAnchor).isActive = true
    self.loadingAnimation.centerYAnchor.constraint(equalTo: self.coverView.centerYAnchor).isActive = true
    self.loadingAnimation.heightAnchor.constraint(equalToConstant: 100).isActive = true
    self.loadingAnimation.widthAnchor.constraint(equalToConstant: 100).isActive = true
    self.loadingAnimation.loopMode = .loop
    self.loadingAnimation.play()

    self.view.isHidden = false
}

和crawlWebsite 你可以保持原样：

//MARK: crawlWebsite
func crawlWebsite(finished: @escaping () -> Void){

var html: String?
guard let url = self.url else { return }
let directoryURL = url as NSURL
let urlString: String = directoryURL.absoluteString! 
// save url to wish
self.wishView.link = urlString

DispatchQueue.main.async { [weak self] in
    guard let self = self else { finished(); return }
    html = self.getHTMLfromURL(url: url)
    self.getContentFromHTML(html: html, url: url)
    self.getOpenGraphData(urlString: urlString) {
        finished()
    }
  }
}

我希望这可以解决您面临的问题。

Answer 2

我认为您使用了太多异步。您只需要在结果视图准备好时停止动画。所以你的结构应该立即播放动画，在后台抓取网站，当它完成时，停止动画并显示结果。

所以有两个队列，在后台队列中爬行，当它准备好时，从后台队列中运行主队列中的异步以停止动画并显示结果。

Answer 3

在后台线程中加载数据（因此不会影响 UI）并仅在主队列上发送完成回调，例如

func crawlWebsite(finished: @escaping () -> Void){
    
    var html: String?
    guard let url = self.url else { return }
    let directoryURL = url as NSURL
    let urlString: String = directoryURL.absoluteString! 
    // save url to wish
    self.wishView.link = urlString
 
    DispatchQueue.global(qos: .background).async { [weak self] in
        guard let self = self else { 
            DispatchQueue.main.async {
               finished()
            }
          return
        }
        html = self.getHTMLfromURL(url: url)
        self.getContentFromHTML(html: html, url: url)

        self.getOpenGraphData(urlString: urlString) {
            DispatchQueue.main.async {
               finished()
            }
        }
    }
}

Answer 4

我没有使用 Lottie-Animation 的经验，但我发现这段代码中至少有 2 个问题。

1. 很多不需要的DispatchQueue.main.async 电话。删除所有，并重写 crawlWebsite 函数，就像上面建议的那样，结合 async global 和 async main。

2. 在setUpLoadingAnimation 函数中，确保只添加一次子视图和设置约束，对于其他调用，例如使用hidden 属性。

Answer 5

最后一个 DispatchQueue.main.async 就足够了

    //MARK: crawlWebsite
func crawlWebsite(finished: @escaping () -> Void){
    
    var html: String?
    guard let url = self.url else { return }
    let directoryURL = url as NSURL
    let urlString: String = directoryURL.absoluteString! 
    // save url to wish
    self.wishView.link = urlString
 
    DispatchQueue.main.async { [weak self] in
        guard let self = self else { finished(); return }
        html = self.getHTMLfromURL(url: url)
        self.getContentFromHTML(html: html, url: url)
        self.getOpenGraphData(urlString: urlString) {
            finished()
        }
    }
}

删除所有其他 DispatchQueue.main.async