Swift Dispatch Main 同步使 UIView 动画混乱

如何解决Swift Dispatch Main 同步使 UIView 动画混乱

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

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

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

我必须如何以及在何处调用 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")
        }

    }
}

视图没有被设置，它在 printing 之后停止 print("tapped 2") 并且只打印 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()
        }
    }
}

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

解决方法

似乎有多余的 DispatchQueue.main.async 调用

最好将所有函数中的 DispatchQueue.main.async 移除，并在 DispatchQueue.main.async 中的 addWishButtonTapped() 中调用所有这些函数

您可以尝试进行以下更改：

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

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

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

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

在后台线程加载数据（所以不影响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()
            }
        }
    }
}

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

很多不需要的 DispatchQueue.main.async 调用。删除所有，并重写 crawlWebsite 函数，就像上面建议的那样，结合 async global 和 async main。
在 setUpLoadingAnimation 函数中，确保您只添加一次子视图和设置约束，对于其他调用，例如使用 hidden 属性。

最后一个 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

Swift Dispatch Main 同步使 UIView 动画混乱

如何解决Swift Dispatch Main 同步使 UIView 动画混乱

解决方法

相关推荐