将UIView的透视动画翻转到从底部翻转一半/离开

Question

我有一个视图，我想像这个插图一样翻转它。

我的当前解决方案：

[UIView animateWithDuration:duration
                 animations:^{
                     [someView.layer setAffineTransform:CGAffineTransformMakeScale(1, 0)];
                 }];

这个解决方案的问题在于，顶部边缘向下移动，而底部边缘正在向上移动。我希望顶部边缘保持不变，底部边缘向上/远离移动，就像这个插图一样。

编辑：就像那些猫门一样，哈哈。你用位于顶部的铰链将一个圆盘/正方形面板推向远离你的方向。

编辑2：解决方案。

CGFloat someViewHeight = self.someView.frame.size.height;

CATransform3D baseTransform = CATransform3DIdentity;
baseTransform.m34 = - 1.0 / 200.0;
self.someView.layer.zPosition = self.view.frame.size.height * 0.5;
self.someView.layer.transform = baseTransform;

CATransform3D rotation = CATransform3DMakeRotation(- M_PI_2, 1.0, 0.0, 0.0);
CATransform3D firstTranslation = CATransform3DMakeTranslation(0.0, someViewHeight * 0.5, 0.0);
CATransform3D secondTranslation = CATransform3DMakeTranslation(0.0, - someViewHeight * 0.5, 0.0);

self.someView.layer.transform = CATransform3DConcat(CATransform3DConcat(firstTranslation, CATransform3DConcat(rotation, secondTranslation)), baseTransform);

花了一些时间，我才明白[UIView animateWithDuration:]会以某种方式来动画化视角，所以动画将缩小视图并做一些我无法解释的奇怪事情。因此，我现在自己进行动画处理，仅每次更改角度。

- user89862

Answer 1

你的意思是像这样吗：

    [UIView animateWithDuration:3.0 animations:^{
        [someView.layer setAffineTransform:
         CGAffineTransformConcat(CGAffineTransformMakeScale(1.0f, .0001f), CGAffineTransformMakeTranslation(.0f, someView.frame.size.height*-.5f))];
    }];

我将修复您所描述的问题，要显示您图片中的结果，您需要进行3D转换。

在您的情况下，进行3D转换会变得相当棘手：

    CGFloat viewHeight = someView.frame.size.height; //needed later as this value will change because of transformation applied
    CATransform3D baseTransform = CATransform3DMakeTranslation(.0f, .0f, viewHeight*.5f); //put it towards user for rotation radius
    baseTransform.m34 = -1.0/200.0; //this will make the perspective effect
    someView.layer.zPosition = view.frame.size.height*.5f; //needed so the view isn't clipped
    someView.layer.transform = baseTransform; //set starting transform (no visual effect here)

    [UIView animateWithDuration:6.6 animations:^{
        someView.layer.transform = CATransform3DConcat(CATransform3DConcat(CATransform3DMakeRotation(-M_PI_2, 1.0f, .0f, .0f), CATransform3DMakeTranslation(.0f, viewHeight*.5f, .0f)) , baseTransform);
      //or to stay at the same center simply:
      //someView.layer.transform = CATransform3DConcat(CATransform3DMakeRotation(-M_PI_2, 1.0f, .0f, .0f) , baseTransform);
    }];

现在可以对其进行一些试验。

- Matic Oblak

---

我添加了3D变换示例。 - Matic Oblak

哇！太棒了，谢谢！几乎完全符合我的需求，我应该能自己解决最后一部分 :) 顶部在移动，它应该是固定的。但非常感谢，非常接近 ;) - user89862