CABasicAnimation not reliable in UIStackView? - ios

Question

I have a UIStackView with axis vertical that is displaying some items similar to a UITableView. However, I am animating them in. Delay using DispatchQueue.main.asyncAfter.
Here is the code I am using to create the CABasicAnimation:
let anim = CABasicAnimation(keyPath: "transform.translation.x")
anim.duration = 0.2
anim.fromValue = UIScreen.main.bounds.size.width
anim.toValue = 0
anim.isRemovedOnCompletion = true
anim.fillMode = kCAFillModeRemoved
For some reason, at least on the Simulator (I don't think this should matter, as this app should work on older devices, or powerful devices like iPhone 7+), the animation doesn't always land in the same spot.
Sometimes, the cell will fly in and be about 8 pixels from the left, sometimes about 12, sometimes about 20. It doesn't seem consistant. But I think my toValue being 0, it should appear where it would appear normally if I didn't add an animation to the layer.
I tried setting isRemovedOnCompletion to true, and fillMode to removed, but this didn't seem to fix the animation.
On a side note, as the animation continues, there is one point where a cell is made from a horizontal UIStackView, where the arrangedSubviews are hidden in it. I use the UIView.animateWithDuration method to set their hidden values to false, and thus, animate the subviews into existence.
The reason I note this is because when this happens, the cells up above pop back into the positions they should be, instead of being a few pixels off.
I tried setNeedsDisplay on the cells after they animate, and also on the verticalStackView, which didn't work either. I don't get what is going on and why these layers just won't animate into their correct positions. Any ideas anyone?
P.S. The vertical stackView is all initialized in the ViewController's init method. The animations occur in the viewDidAppear method. I tried offsetting the animation by adding DispatchQueue.main.asyncAfter, and also tried it first thing after super.viewDidAppear(animated), but both had the same results.

Answer 1

Animating items into and out of a stack view is actually VERY easy.
All you have to do is to set the frame of the view to the place you want it to start before adding it to the stack view, and then call layoutIfNeeded() inside an animation block immediately after adding the new view. Here's some sample code taken from a working app:
let newView = createNewView()
self.stackView.addArrangedSubview(newView)
if sender != nil {
UIView.animate(withDuration: 0.2) {
self.stackView.layoutIfNeeded()
}
}

Answer 2

Figured out the issue. Here's the problem...
1) You want to animate just the presentation layer, but keep the actual position of the elements due to UIStackView positioning things well for you. So CoreAnimation seems like a great option.
2) Because you're dealing with a UIStackView, at first glance, you can't animate position constraints for its arrangedSubviews. So it's another reason you don't want to animate constraints, and go with CoreAnimation.
So you choose CoreAnimation. Since it's only the presentation layer that matters, no need to animate constraints right? Only really need to do those if you want the user interactive portion of the views to adhere to the constraints right? Well yes, and no.
But for whatever reason, CoreAnimation doesn't do what it's supposed to do. Maybe Apple will fix that in the future. But Maybe not. Oh well, it doesn't matter. Here's the solution:
Use a placeholder for all of your arrangedSubviews in the stackview. For me, this was just a UIView that would resize itself based on the contents within it.
Now, let this placeholder have no background color. Only allow it to have visible content that you don't ever want to animate. Since I'm animating the entire cell, I just have a blank UIView with no backgroundColor.
Set constraints for subviews of this placeholder view with respect to this placeholder view. Now, you can animate these constraints with the usual AutoLayout animation tools. For example:
constraint.constant = 0
UIView.animate(withDuration: 0.2,
delay: 0.1,
options: UIViewAnimationOptions.curveEaseOut,
animations: {
cell.layoutIfNeeded()
}, completion: nil)
Booyah! Animations are smooth and actually end up where you want them relative to the arrangedSubview. Woohoo!