当我为容器UIView设置动画时,如何缩放容器UIView的子视图的布局/大小？

Question

目标:能够为容器视图的框架设置动画,同时它的子视图保持其原始布局和比例与容器视图成比例.

场景:

1. 通过约束/自动布局定位的元素; 在绿色容器内.
2. 每个动画调整绿色containerView的物理坐标(帧/边界).
3. 成员的压缩和拥抱属性设置为低优先级.

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
            })
        }
    }
}

这是原始布局:

我希望成员元素按比例与其容器视图成比例,如下所示:

但是成员元素(一个标签'Hello World!')没有相应调整,因为它们的绿色容器视图动画到左上角的方块:

如何保持UIView成员的布局与其盛行的容器视图框架成比例？

注意:这适用于任何类型的成员(UIView,UITextView,...等); 用于简单的位置/布局和转换(数据透视)动画.

Answer 1

在您的示例中，您有一个绿色背景视图 (BG) 和一个 hello world 视图 (HW)，并且您希望 HW 按 BG 的比例缩放。
\n您可以轻松实现此目的：\n打开 Xcode 中的实用程序窗格（最右上角的图标）和文档大纲（故事板的左下角图标）。
\n让\xe2\x80\x99s 假设HW 已经在BG 中居中，即您已经设置了HW 在容器中水平和垂直居中的对齐约束。
\n现在，在文档大纲中选择 BG 和 HW，然后单击右下角的 \xe2\x80\x9ePin\xe2\x80\x9c 图标。它将提供约束 \xe2\x80\x9eEqual widths\xe2\x80\x9c 和 \xe2\x80\x9eEqual heights\xe2\x80\x9c。激活两者。
\n创建这些约束后，在文档大纲中打开其中之一。然后，实用程序窗格将显示带有 2 个视图和乘数字段的等宽约束。
\n在“乘数”字段中，您可以输入所选尺寸所需的比例，例如 1:3。这将固定所选尺寸的比例。
\n对于其他维度当然类似。当然，你必须更新硬件框架。
\n这是一个示例：
\n

\n