How do I scale a container UIView's subviews' layout/size as I animate the container UIView?

Question

Goal: to be able to animate a container-view's frame while it's subviews keep their original layout & scale in proportion to their container view.

Scenario:

1. Elements positioned via constraints/autolayout; within green container.
2. Green containerView's physical coordinates (frame/bounds) are adjusted per animation.
3. Members' compression & hugging properties are set to a low priority.

UIView.animateWithDuration(0, animations: {
    self.bounds = myBounds
}) {(One) in
    UIView.animateWithDuration(1, animations: {
        self.frame = myFrame
    }) {(Two) in
        UIView.animateWithDuration(0.5, animations: {
            self.frame = origFrame
            // self.center = myCenter
        }) {(Three) in
            UIView.animateWithDuration(0.2, animations: {
                self.frame = distantFrame
            })
        }
    }
}

Here's the original layout:

I would like to have member element scale proportionally with their container view like this:

But the member elements (the one label 'Hello World!') don't adjust accordingly as their green containerView animates to a square in the upper left-hand corner:

How do I keep a UIView's members' layout in proportion to the prevailing their prevailing container view's frame?

Note: This would apply to any type of member (UIView, UITextView, ...etc.); for simple position/layout & transformation (pivot) animations.

Answer 1

In your example, you have a green background view (BG) and a hello world view (HW), and you want HW to scale in proportion to BG.
You can achieve this easily: Open the Utilities pane in Xcode (top rightmost icon), and the Document outline (bottom left icon of storyboard).
Let’s assume that HW is already centered in BG, i.e. that you already set the alignment constraints for HW center horizontally and vertically in container.
Now, select BG as well as HW in the Document outline, and click the „Pin“ icon bottom right. It will offer the constraints „Equal widths“ and „Equal heights“. Activate both.
After these constraints have been created, open one of them in the Document outline. The utilities pane will then show the Equal Width constraint with the 2 views and a Multiplier field.
In the Multiplier field, you can enter the required proportions for the selected dimension, e.g. 1:3. This will fix the proportion for the selected dimension.
For the other dimension of course analogously. Of course you had then to update the frame of HW.
Here is an example: