Animated layout change with simultaneous view cross-dissolve - ios

Question

I have a UIView containing a number of UILabel positioned with AutoLayout.
On device rotation I switch the layout constraints to animate the labels to new locations (the layout constraints are derived from a Layout object which is assigned to the view):
override func viewWillTransition(
to size: CGSize,
with coordinator: UIViewControllerTransitionCoordinator
) {
super.viewWillTransition(to: size, with: coordinator)
let isLandscape = size.width > size.height
let layout = isLandscape ? layoutLandscape : layoutPortrait
coordinator.animate(
alongsideTransition: { _ in self.layoutView.setLayout(layout) },
completion: nil
)
}
This effect works well and provides a smooth transition between different content layouts optimised for landscape and portrait.
However, during the transition, the size of the labels also changes due to the layout constraints. It is noticeable that while the transition of labels' positions is gradual, the labels' shapes change immediately at the start of the transition, and then they animate to their final position.
I would like to be able to cross-disolve the labels between their initial and final shapes and have this occur alongside the position animation.
Ideally, I'd like to do this in the same highly decoupled manner that position animation is achieved, with the layout update code being oblivious of whether the change will be animated or not. I'm expecting at least a bit of compromise may be required, though!
Thank you.
I'm fairly close to a working solution on this. It's not answer material yet, so I'm going to put notes here as "Stuff I've Tried" – if it becomes an answer I'll turn it in to one.
A fantastic article at objc.io shows how you can create a UILabel subclass that will tell its backing CALayer to animate changes to its content property using a CATransition. It's purest unadulterated sorcery, but marvellously, it actually all makes sense and you suspect that perhaps you too can don the wizard's hat.
So, you end up with something a bit like this:
class ContentAnimatedLabel: UILabel {
override func action(for layer: CALayer, forKey event: String) -> CAAction? {
guard event == "contents" else {
return super.action(for: layer, forKey: event)
}
let transition = CATransition()
// Oh noes! A hard coded made up value!
// And where do we get the timing curve?! Curses.
transition.duration = 0.3
return transition
}
}
And as far as it goes, it works! The content of the labels fades nicely, and their position interpolates. And it looks fairly grand.
The problem is that you this code doesn't know if it is being called from within an animation block. Really, it should only return the transition when being called from within an animation block, and it should copy animation properties such as duration and timing from those given by the animation block.
The article suggests a solution to this…
The UIView animation mechanism implementation is private, so there's no simple flag we can check to see if the view is currently animating, however we do know one thing: When animating, UIView's actionForLayer:forKey: will return valid CAActions for its animatable property keys, and when not animating it will return [NSNull null] for them. If we simply pick a suitable key we can interrogate UIView to see if it's currently supplying an action for that key, and use that to determine our response for our custom key. We'll use the key "backgroundColor" since that's a property of UIView that normally supports animation, and that we know returns a CABasicAnimation as its action (as of iOS 8, some properties, such as "bounds" return a private class instead, so watch out):
… but this doesn't seem to work, at least for the iOS 11 on which I'm testing.
When UIKit asks for the action for the content key, its as if the animation block has finished. Asking super for the action in use by another keys always returns nothing. So you're left with nothing to grab appropriate transition parameters from.