您如何在没有相互冲突的转换的情况下翻译和缩放视图？

Question

我需要将 UIView 从屏幕中心平移和缩放到右上角。

 _____________________________
|                            |
|                            |
|         _________          |
|        |         |         |    START
|        |         |         |
|        |_________|         |
|                            |
|                            |
|____________________________|


 _____________________________
|                       __   |
|                      |__|  |
|                            |
|                            |    END
|                            |
|                            |
|                            |
|                            |
|____________________________|

我验证了我对比例和平移的个人计算是准确的。但是一旦它们放在一起，它们就会相互冲突。以下代码使视图最终离中心太近。

CGFloat finalPadding = 10.0f;
CGFloat finalScale = 46.0f / 170.0f;
CGFloat finalX = self.view.frame.size.width 
    - self.platformProgressView.frame.size.width * finalScale 
    - finalPadding;
CGFloat finalY = finalPadding;
CGFloat deltaX = finalX - self.platformProgressView.frame.origin.x;
CGFloat deltaY = finalY - self.platformProgressView.frame.origin.y;

[UIView
    animateWithDuration:1.0
    delay:1.0
    options:UIViewAnimationOptionCurveEaseOut
    animations:^(void){
        self.platformProgressView.transform = CGAffineTransformConcat(
            CGAffineTransformMakeTranslation(deltaX, deltaY),
            CGAffineTransformMakeScale(finalScale, finalScale)
        );            
    }
    completion:^(BOOL finished) {
    }
];

最终效果：

 _____________________________
|                            |
|                            |
|                __          |
|               |__|         |
|                            |
|                            |
|                            |
|                            |
|____________________________|

更改乘法的顺序会导致视图偏离屏幕的右边缘。

self.platformProgressView.transform = CGAffineTransformConcat(
     CGAffineTransformMakeScale(finalScale, finalScale),
    CGAffineTransformMakeTranslation(deltaX, deltaY)
);

最终效果（预计）：

 _____________________________
|                            |
|                            |    __
|                            |   |__|
|                            |
|                            |
|                            |
|                            |
|                            |
|____________________________|

单独应用它们会导致突然跳跃，最终位置更糟。

self.platformProgressView.transform = CGAffineTransformMakeTranslation(deltaX, deltaY);
self.platformProgressView.transform = CGAffineTransformMakeScale(finalScale, finalScale);

最终效果：

 _____________________________
|                            |
|                            | 
|                            |  
|                            |
|       __                   |
|      |__|                  |
|                            |
|                            |
|____________________________|

Answer 1

理解变换

要实现的主要内容是变换的原点是视图矩形的中心点。最好用一个例子来说明这一点。

首先我们翻译视图。 v1 是其原始位置的视图，v2 是其平移位置的视图。 p 是您想要的填充（finalPadding 在您的代码中）。 c 标记视图的中心点。

+--------------------------------+
|                        ^       |
|                        | p     |
|                        v       |
|              +- v2 --------+   |
|              |             |   |
|              |      c      |<->|
|              |             | p |
|              +-------------+   |
|                                |
|                                |
|    +- v1 --------+             |
|    |             |             |
|    |      c      |             |
|    |             |             |
|    +-------------+             |
|                                |
+--------------------------------+

接下来我们缩放视图。 v3 是其缩放位置的视图。请注意 v3 的中心点如何保持不变，而其周围的视图尺寸会缩小。虽然尺寸是正确的，但视图的定位和生成的填充 p' 是错误的。

+--------------------------------+
|                       ^        |
|                       | p'     |
|                       |        |
|                       v        |
|                 +- v3 --+      |
|                 |   c   |<---->|
|                 +-------+  p'  |
|                                |
|                                |
|    +- v1 --------+             |
|    |             |             |
|    |      c      |             |
|    |             |             |
|    +-------------+             |
|                                |
+--------------------------------+

增量计算的修复

既然我们知道了缩放的工作原理，我们需要修复计算平移增量的代码。以下是正确的做法：

CGRect windowFrame = self.window.frame;
CGRect viewFrame = self.platformProgressView.frame;
CGPoint finalCenter = CGPointZero;
finalCenter.x = (windowFrame.size.width
                 - (viewFrame.size.width * finalScale) / 2.0f
                 - finalPadding);
finalCenter.y = (finalPadding
                 + (viewFrame.size.height * finalScale) / 2.0f);
CGPoint viewCenter = self.platformProgressView.center;
CGFloat deltaX = finalCenter.x - viewCenter.x;
CGFloat deltaY = finalCenter.y - viewCenter.y;

变换顺序

最后，正如您自己所指出的，转换与CGAffineTransformConcat 连接的顺序很重要。在您的第一次尝试中，您有序列 1) 变换 + 2) 缩放。结果是比例变换（在序列中稍后出现）会影响为平移变换指定的增量。

这里有 2 个解决方案：您自己的第二次尝试，您可以反转序列，使其变为 1) 缩放 + 2) 变换。或者您使用我在答案的第一版中建议的辅助函数。所以这个

self.platformProgressView.transform = CGAffineTransformConcat(
    CGAffineTransformMakeScale(finalScale, finalScale),
    CGAffineTransformMakeTranslation(deltaX, deltaY)
);

等价于

CGAffineTransform CGAffineTransformMakeScaleTranslate(CGFloat sx, CGFloat sy, CGFloat dx, CGFloat dy)
{
  return CGAffineTransformMake(sx, 0.0f, 0.0f, sy, dx, dy);
}

self.platformProgressView.transform = CGAffineTransformMakeScaleTranslate(finalScale, finalScale, deltaX, deltaY);

另一种解决方案：设置锚点

如果您对中心点作为视图变换的原点不满意，您可以通过设置视图 CALayer 的 anchorPoint 属性来更改此设置。默认锚点位于 0.5/0.5，表示视图矩形的中心。显然，锚点不是坐标而是一种乘数。

如果我们假设锚点位于视图的左上角，那么您对平移增量的原始计算是正确的。所以如果你这样做

self.platformProgressView.layer.anchorPoint = CGPointMake(0.0f, 0.0f)

您可以保留原来的计算。

参考

那里可能有更多信息材料，但我最近观看了 WWDC 2011 视频Understanding UIKit Rendering，它极大地帮助我提高了对边界、中心、变换和框架之间关系的理解。

另外，如果您要更改 CALayer anchorPoint 属性，您应该先阅读CALayer class reference 中的属性文档。

Answer 2

变换适用于所有以前的变换。所以必须考虑到这一点并仔细考虑订单。

这些值需要配置为，如果一个发生，然后是下一个，即使它们被连接到一个转换中。

Answer 3

这是一个很好的答案，这里是如何在 Swift 4 中做到这一点

 let containerFrame: CGRect  = self.view.frame
    let viewFrame: CGRect  = self.containerView.frame
    var finalCenter: CGPoint  = CGPoint.zero
    let finalPadding: CGFloat  = 0
    let finalScale: CGFloat  = 2.0 //whatever scale that you want

    finalCenter.x = (containerFrame.size.width - (viewFrame.size.width * finalScale) / 2.0 - finalPadding)
    finalCenter.y = (finalPadding + (viewFrame.size.height * finalScale) / 2.0);

    let containerCenter: CGPoint  = self.containerView.center
    let deltaX: CGFloat  = finalCenter.x - containerCenter.x
    let deltaY: CGFloat  = finalCenter.y - containerCenter.y

    let scale = CGAffineTransform(scaleX: finalScale, y: finalScale)
    //MARK: changing the deltas for positive to negative values will change the origin x and y of the transformed view
    let translation = CGAffineTransform(translationX: -deltaX, y: deltaY)

    self.containerView.transform = scale.concatenating(translation)

Answer 4

旋转和平移：

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    let yPos = scrollView.contentOffset.y
    if yPos < 0 {
        let scaleX = ((yPos * -1) / 200) + 1
        let translateY = yPos / 2
        var commonTransform = CGAffineTransform.identity
        commonTransform = commonTransform.translatedBy(x: 0, y: translateY)
        commonTransform = commonTransform.scaledBy(x: scaleX, y: scaleX)
        self.customView?.transform = commonTransform
    }else{
        self.customView?.transform = CGAffineTransform.identity
    }
}