使用CALayer实现图像镜面效果

在iOS中，可以使用QuartzCore.framework基于CALayer做一些图像效果，不清楚CALayer，请先看这篇。

在这里我们给图像做一个简单的镜面反射效果，要学习一些图像变化的知识，首先，图像的变化分为：位置变化、尺寸变化、旋转变化等，在计算中，这些变化是用《线性代数》中的矩阵来表示，每一个图像的变化（无论多复杂），都可以分解为几个向量的数部移动，具体原理可以看这片文章。

核心代码

[cpp]  view plain copy print ?

1. - (IBAction)addImageReflectionView:(id)sender {  
2.     CALayer *reflectLayer = [CALayer layer];  
3.     reflectLayer.contents = imageView.layer.contents;  
4.     reflectLayer.bounds = imageView.layer.bounds;  
5.     reflectLayer.position = CGPointMake(imageView.layer.bounds.size.width/2, imageView.layer.bounds.size.height*1.5);  
6.     reflectLayer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);  
7.       
8.     // 给该reflection加个半透明的layer  
9.     CALayer *blackLayer = [CALayer layer];  
10.     blackLayer.backgroundColor = [UIColor blackColor].CGColor;  
11.     blackLayer.bounds = reflectLayer.bounds;  
12.     blackLayer.position = CGPointMake(blackLayer.bounds.size.width/2, blackLayer.bounds.size.height/2);  
13.     blackLayer.opacity = 0.6;  
14.     [reflectLayer addSublayer:blackLayer];  
15.       
16.     // 给该reflection加个mask  
17.     CAGradientLayer *mask = [CAGradientLayer layer];  
18.     mask.bounds = reflectLayer.bounds;  
19.     mask.position = CGPointMake(mask.bounds.size.width/2, mask.bounds.size.height/2);  
20.     mask.colors = [NSArray arrayWithObjects:  
21.                    (__bridge id)[UIColor clearColor].CGColor,  
22.                    (__bridge id)[UIColor whiteColor].CGColor, nil];  
23.     mask.startPoint = CGPointMake(0.5, 0.35);  
24.     mask.endPoint = CGPointMake(0.5, 1.0);  
25.     reflectLayer.mask = mask;  
26.       
27.     // 作为layer的sublayer  
28.     [imageView.layer addSublayer:reflectLayer];  
29. }  

在CALayer上所做的Transform，使用的是CATransform3D,其支持x y z 三个方向的旋转，其中

[cpp]  view plain copy print ?

1. CATransform3DMakeRotation(M_PI, 1, 0, 0);  

的结果便是CATransform3D，它是一个矩阵，值可以这样查看

[cpp]  view plain copy print ?

1. NSLog(@"trans \n m11 %f m12 %f m13 %f m14 %f \n m21 %f m22 %f m23 %f m24 %f \n m31 %f m32 %f m33 %f m34 %f \n m41 %f m42 %f m43 %f m44 %f\n",trans.m11,trans.m12,trans.m13,trans.m14,trans.m21,trans.m22,trans.m23,trans.m24,trans.m31,trans.m32,trans.m33,trans.m34,trans.m41,trans.m42,trans.m43,trans.m44);  

然后其中，第一参数是旋转的角度，后3个参数，代表的是旋转的向量，可以想想下，在3D坐标下，同样是旋转90度，沿着X轴的旋转和沿着Y轴的旋转，得到的结果是不一样的，

在这里设置的值是（M_PI,1,0,0）它不同于在平面内垂直于Z轴旋转180度（M_PI,0,0,1），而是相当于垂直于X轴的翻转。用语言讲起来抽象，言语万千不及代码两行，大家可以下载源码，自己试下运行结果。