5

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:

enter image description here

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

enter image description here

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:

enter image description here

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.

Frederick C. Lee
  • 9,019
  • 17
  • 64
  • 105
  • Did you try using CATransforms instead of changing the frame, to scale and translate? view.transform = CATransformMakeScale(...) will do exactly what you want. This also won't screw up your constraints like changing the frame does. – DBoyer Feb 12 '16 at 03:13
  • I'm an animation neophyte here; only know UIView animation. However, I saw an animated view/content that can resize, pivot, sift...etc... whilst keeping its content intact. I want to learn his for self-edification. I'll study CATransformMakeScale. Thanks for the idea. – Frederick C. Lee Feb 12 '16 at 03:20
  • If I understand you correctly, you just need to setup your constraints properly. If the textfield (or whatever subview element you are) has properly pinned to the sides of the super view, it should correctly scale horizontally. Depending on needs beyond that you would need additional constraints, but that would be a start. – Firo Feb 12 '16 at 20:55
  • That's what I thought (including lowering members' compression rules)... but the container-view's elements always get disconnected and havoc plays. BTW: I managed to scale the container view w/contents via CATransformMakeScale. Now I'm trying to move it and eventually play with other animations. In short, I want to be able to animate a view + contents as a SINGLE unit. This is merely for my own edification. --- The solution appears to have autolayout used initially; then play with the CALayer with transformations for the animation effects. – Frederick C. Lee Feb 12 '16 at 22:18

1 Answers1

2

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:
enter image description here

Reinhard Männer
  • 14,022
  • 5
  • 54
  • 116
  • Shall follow & learn. Eventually I want to add assorted animation to this, perhaps conflicting with the constraints.... like animating the BG to fold, curl, etc.... This is *purely* for self-edification, learning to use CALayer/UIView/Constraint properties in unison for assorted effects. – Frederick C. Lee Feb 16 '16 at 23:13