Asynchronous Function with DispatchGroup - swift

Question

I'm trying to set an animation inside of Playgrounds and make a simple message pop up in the debugger after completion.
With this, the .notify is appearing at the beginning. Wouldn't it appear after the animate functions went through inside of DispatchQueue.main.async(group: animationGroup)?
Here is the code provided:
import UIKit
import PlaygroundSupport
PlaygroundPage.current.needsIndefiniteExecution = true
extension UIView {
static func animate(withDuration duration: TimeInterval, animations: #escaping () -> Void, group: DispatchGroup, completion: ((Bool) -> Void)?) {
}
}
let animationGroup = DispatchGroup()
// A red square
let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = UIColor.red
// A yellow box
let box = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
box.backgroundColor = UIColor.yellow
view.addSubview(box)
PlaygroundPage.current.liveView = view
DispatchQueue.main.async(group: animationGroup) {
UIView.animate(withDuration: 1, animations: {
// Move box to lower right corner
box.center = CGPoint(x: 150, y: 150)
}, completion: {
_ in
UIView.animate(withDuration: 2, animations: {
// Rotate box 45 degrees
box.transform = CGAffineTransform(rotationAngle: .pi/4)
}, completion: .none)
})
UIView.animate(withDuration: 4, animations: { () -> Void in
// Change background color to blue
view.backgroundColor = UIColor.blue
})
}
animationGroup.notify(queue: DispatchQueue.main) {
print("Animations Completed!")
}

Answer 1

The call to async(group:os:flags:execute:) API that you’re using is used when performing tasks that are, themselves, synchronous. E.g. let's say you were going to process a bunch of images in some slow, synchronous API, but wanted to run this in parallel, on background threads to avoid blocking the main thread. Then you’d use async(group:execute:) API:
let group = DispatchGroup()
for image in images {
DispatchQueue.global().async(group: group) {
self.process(image)
}
}
group.notify(queue: .main) {
// all done processing the images
}
In this case, though, the individual, block-based UIView animation API calls run asynchronously. So you can’t use this async(group:execute:) pattern. You have to manually enter before starting each asynchronous process and then leave inside the respective completion closures, matching them up one-to-one:
animationGroup.enter()
UIView.animate(withDuration: 1, animations: {
box.center = CGPoint(x: 150, y: 150) // Move box to lower right corner
}, completion: { _ in
UIView.animate(withDuration: 2, animations: {
box.transform = CGAffineTransform(rotationAngle: .pi / 4) // Rotate box 45 degrees
}, completion: { _ in
animationGroup.leave()
})
})
animationGroup.enter()
UIView.animate(withDuration: 4, animations: {
view.backgroundColor = .blue // Change background color to blue
}, completion: { _ in
animationGroup.leave()
})
animationGroup.notify(queue: .main) {
print("Animations Completed!")
}

Answer 2

First of all, to quote from the documentation:
notify(queue:work:)
Schedules a work item to be submitted to a queue when a group of previously submitted block objects have completed.
Basically, there are no "previously" submitted blocks, so your notify block is called right away. This is happening because you added work items to the group in DispatchQueue.main.async. You can check this by adding a print inside DispatchQueue.main.async(group: animationGroup) and another print right before you call the notify method. The second one will print first.
On top of that, calling an asynchronous function inside DispatchGroup.main.async is problematic because the work item will enter immediately, then you'll dispatch your async work to another thread, and the work item will leave right after, even though your async work isn't done.
To fix this, you have to call animationGroup.enter() when you start your asynchronous operation, and then call animationGroup.leave() when you're done. Additionally, you have to take your code out of DispatchGroup.main.async. If you make these changes, the notify block will execute when the enter/leave calls are balanced.