同时透视和翻转 UIImageView

Question

我正在尝试翻转并给透视旋转 uiimageview，以获得类似反射的效果。首先我使用 CATransform3D 给出透视图，然后使用 CGAffineTransformMake 翻转。但是，我在第二次转换后失去了透视效果。而且我不知道如何使用 CATransform3D 透视和翻转两者。 img 是第一个图像，img2 将是它的反射。

CALayer *layer = img.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -600;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 30.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;
img2.transform = CGAffineTransformMake(
                                            1, 0, 0, -1, 0, img2.bounds.size.height
                                            );

Answer 1

我能够通过 4 个（可选 5 个）步骤完成此效果：

1. 在您的 nib 中创建两个 UIImageView。为您的主图像创建一个 UIImageView，然后为您的反射图像创建另一个。确保他们的视图内容模式都设置为 Aspect Fit。此外，将反射图像的帧大小设置为主图像的 2 倍（因为透视反射会增加图像的宽度）。

2. 正常加载主图像。现在将反射加载为上下颠倒，如下所示：

   reflectionView.image = [UIImage
                      imageWithCGImage:mainImageView.image.CGImage
                      scale:1.0f
                      orientation: UIImageOrientationDownMirrored];
   

3. 现在像这样创建透视变换：

   CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
   rotationAndPerspectiveTransform.m24 = 1.0f/-mainImageView.frame.size.width;
   [[reflectionView layer] setTransform:rotationAndPerspectiveTransform];
   

4. 最后，将反射移动到位：

   reflectionView.center = CGPointMake(self.view.frame.size.width/2, mainImageView.frame.size.height*1.5);
   

5. （可选）添加渐变以使反射淡入 背景：

   reflectionView.layer.masksToBounds = YES;
   
   // define gradient
   CAGradientLayer *theGradient = [CAGradientLayer layer];
   theGradient.frame = reflectionView;
   theGradient.colors = [NSArray arrayWithObjects:
                         (id)[[UIColor clearColor] CGColor],
                         (id)[[UIColor blackColor] CGColor], nil];
   
   // add gradient to reflection image
   [reflectionView insertSublayer:theGradient atIndex:0];
   reflectionView = 0.25f;
   

看起来像这样：