1

反射のような効果を得るために、UIImageView を反転して遠近法を回転させようとしています。最初に CATransform3D を使用してパースペクティブを与え、次に CGAffineTransformMake を使用してフリップします。ただし、2回目の変換後に遠近効果が失われます。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
                                            );
4

1 に答える 1

2

この効果は、4 (オプションで 5) ステップで実現できました。

  1. nib に 2 つの UIImageView を作成します。メイン画像用に 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;

次のようになります。 ここに画像の説明を入力

于 2012-01-05T05:08:02.430 に答える