How do you update UIView layout when using UIKit Dynamics? - ios

Question

I have a custom UIView using UIKit Dynamics to perform an animation when the user taps on a button. The view in question is a simple one, that I lay out manually in layoutSubviews(). However, layoutSubviews() gets called for each frame of animation while UIKit Dynamics are in action, and any layout changes I make in that time (responding, for instance, to a taller status bar) result in distortion of my dynamic views.
How can I respond to a change in view size while a UIKit Dynamics animation is in progress?
Update
I created a demo project (which very closely matches my use case, though it's stripped down), and posted it on GitHub. The storyboard uses AutoLayout, but the view opts out of AutoLayout for laying out its own subviews with translatesAutoresizingMaskIntoConstraints = false. To reproduce the behavior, run in the simulator (I chose iPhone 5) and then hit ⌘Y as the star swings to witness the distortion. This is the view code:
import UIKit
class CustomView: UIView {
var swingingView: UIView!
var animator: UIDynamicAnimator!
var attachment: UIAttachmentBehavior!
var lastViewFrame = CGRectZero
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.translatesAutoresizingMaskIntoConstraints = false
swingingView = UIImageView(image: UIImage(named: "Star"))
self.addSubview(swingingView)
}
override func layoutSubviews() {
// Don't run for every frame of the animation. Only when responding to a layout change
guard self.frame != lastViewFrame else {
return
}
lastViewFrame = self.frame
swingingView.frame = CGRect(x: 0, y: self.frame.size.height / 2, width: 100, height: 100)
// Only run this setup code once
if animator == nil {
animator = UIDynamicAnimator(referenceView: self)
let gravity = UIGravityBehavior(items: [swingingView])
gravity.magnitude = 1.5
animator.addBehavior(gravity)
attachment = UIAttachmentBehavior(item: swingingView,
offsetFromCenter: UIOffset(horizontal: 0, vertical: swingingView.frame.size.height / -2),
attachedToAnchor: CGPoint(x: self.bounds.size.width / 2, y: 0))
attachment.length = CGFloat(250.0)
animator.addBehavior(attachment)
}
animator.updateItemUsingCurrentState(swingingView)
}
}

Answer 1

You should use func updateItemUsingCurrentState(_ item: UIDynamicItem) per the UIDynamicAnimator class reference
A dynamic animator automatically reads the initial state (position and
rotation) of each dynamic item you add to it, and then takes
responsibility for updating the item’s state. If you actively change
the state of a dynamic item after you’ve added it to a dynamic
animator, call this method to ask the animator to read and incorporate
the new state.

Answer 2

The issue is that you are re-setting the frame of a view that has been rotated (i.e. that has a transform applied to it). The frame is the size of the view within the parent's context. and thus you are unintentionally changing the bounds of this image view.
This issue is compounded by the fact that you're using the default content mode of .ScaleToFill and thus when the bounds of the image view change, the star is getting (further) distorted. (Note, the image wasn't square to start with, so I'd personally use .ScaleAspectFit, but that's up to you.)
Anyway, you should be able to remedy this problem by (a) setting the frame when you first add the UIImageView to the view hierarchy; (b) do not change the frame in layoutSubviews, but rather just adjust the center of the image view.