CATransformLayer是用來創(chuàng)建立體型的layer的臀栈,CATransformLayer就是一個立體的容器,然后分別添加每一面的layer挠乳,構(gòu)成一個立體型的圖層权薯。
//創(chuàng)建transformLayer對象并添加到頁面上
self.transformLayer = [CATransformLayer layer];
self.transformLayer.bounds = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
self.transformLayer.position = self.view.center;
[self.view.layer addSublayer:self.transformLayer];
CGFloat positionX = self.transformLayer.bounds.size.width/2;
CGFloat positionY = self.transformLayer.bounds.size.height/2;
//上下面需要繞x軸旋轉(zhuǎn)90度
//添加立方體上方的面
CATransform3D topTransform = CATransform3DMakeRotation(M_PI_2, 1, 0, 0);
[self creatLayerWithX:positionX Y:positionY-kWidth/2 Z:0 andTransform:topTransform];
//添加立方體下方的面
CATransform3D bottomTransform = CATransform3DMakeRotation(M_PI_2, 1, 0, 0);
[self creatLayerWithX:positionX Y:positionY+kWidth/2 Z:0 andTransform:bottomTransform];
//左右面需要繞y軸旋轉(zhuǎn)90度
//添加立方體左方的面
CATransform3D leftTransform = CATransform3DMakeRotation(M_PI_2, 0, 1, 0);
[self creatLayerWithX:positionX-kWidth/2 Y:positionY Z:0 andTransform:leftTransform];
//添加立方體右方的面
CATransform3D rightTransform = CATransform3DMakeRotation(M_PI_2, 0, 1, 0);
[self creatLayerWithX:positionX+kWidth/2 Y:positionY Z:0 andTransform:rightTransform];
//前后面不需要繞旋轉(zhuǎn),只需要調(diào)整z軸方向的數(shù)值
//添加立方體前方的面
[self creatLayerWithX:positionX Y:positionY Z:-kWidth/2 andTransform: CATransform3DIdentity];
//添加立方體后方的面
[self creatLayerWithX:positionX Y:positionY Z:kWidth/2 andTransform: CATransform3DIdentity];
//創(chuàng)建立方體的各個面并添加到transformLayer上
- (void)creatLayerWithX:(float)x Y:(float)y Z:(float)z andTransform:(CATransform3D)transform {
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, 180, 180);
layer.position = CGPointMake(x, y);
layer.zPosition = z;
layer.transform = transform;
layer.contents = (id)[UIImage imageNamed:@"icon180*180"].CGImage;
[self.transformLayer addSublayer:layer];
}
創(chuàng)建出來的立方體添加到頁面之后睡扬,只能看到立方體前面的一個面盟蚣,看起來就是一個靜態(tài)的頁面,對立方體的立體表現(xiàn)不夠直觀卖怜。然后給頁面添加一個平移手勢屎开,使用平移手勢控制立方體的旋轉(zhuǎn)。
-(void)handlePanGestureRecognizer:(UIPanGestureRecognizer *)gesture {
CGPoint translation = [gesture translationInView:self.view];
CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(transform, translation.x * 1 / 100, 0, 1, 0);
transform = CATransform3DRotate(transform, translation.y * - 1 / 100, 1, 0, 0);
self.transformLayer.sublayerTransform = transform;
}
這里用到的一個很重要的東西就是CATransform3D马靠,它定義了圖層在三維方向上的變化矩陣牍戚,使用CATransform3D可以很容易在二維平面做出翻頁這樣的三維效果。
struct CATransform3D
{
CGFloat m11, m12, m13, m14;
CGFloat m21, m22, m23, m24;
CGFloat m31, m32, m33, m34;
CGFloat m41, m42, m43, m44;
};
矩陣中的每一個參數(shù)都對應(yīng)著對某一條邊的旋轉(zhuǎn)虑粥,或縮放,或平移的調(diào)節(jié)作用宪哩,我們沒必要清楚地知道每一個參數(shù)的具體作用娩贷,因為有幾個方法可以幫助我們實現(xiàn)旋轉(zhuǎn)縮放平移的功能,只要掌握這幾個方法就可以了锁孟。不過彬祖,其中有一個非常重要的參數(shù)是m34茁瘦。一個物理常識就是離我們眼睛近的物體顯得更大,離的遠的物體顯得更小储笑,這樣我們實現(xiàn)的翻頁效果就更立體逼真甜熔。
m34 = -1.0/d d就是距離眼睛的距離值,一般500-1000之間效果最理想突倍,-1.0表示縮小與眼睛之間的距離腔稀,1.0表示擴大與眼睛之間的距離。
幾個CATransform3D變換的主要方法:
//返回一個CATransform3D對象羽历,表示兩個CATransform3D對象屬性疊加的結(jié)果
CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b);
//tx,ty,tz分別表示x,y,z軸的平移
CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);
//t是一個CATransform3D對象焊虏,tx,ty,tz分別表示基于t的基礎(chǔ)上的x,y,z軸的平移
CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);
//sx,sy,sz分別表示x,y,z軸的縮放比例
CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);
//t是一個CATransform3D對象,sx,sy,sz分別表示基于t的基礎(chǔ)上的x,y,z軸的縮放
CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz);
//angle為旋轉(zhuǎn)角度秕磷,x,y,z的值決定著繞哪個軸旋轉(zhuǎn)诵闭,(M_PI_4, 1, 0, 0)表示繞x軸旋轉(zhuǎn)45度,(M_PI_4, 0, 1, 0)表示繞y軸旋轉(zhuǎn)45度澎嚣,(M_PI_4, 0, 0, 1)表示繞z軸旋轉(zhuǎn)45度
CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
//t是一個CATransform3D對象疏尿,在此基礎(chǔ)上旋轉(zhuǎn),其他參數(shù)同上
CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
更多CATransform3D相關(guān)文章易桃,請點擊這里和這里, 還有這里.
使用CATransformLayer實現(xiàn)一個立體頁面滾動的效果:
//創(chuàng)建transformLayer對象并添加到頁面上
self.transformLayer = [CATransformLayer layer];
self.transformLayer.bounds = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
self.transformLayer.position = self.view.center;
[self.view.layer addSublayer:self.transformLayer];
CGFloat positionX = self.transformLayer.bounds.size.width/2;
CGFloat positionY = self.transformLayer.bounds.size.height/2;
//添加六個面
[self creatLayerWithX:positionX Y:positionY Z:173 andTransform:CATransform3DIdentity];
CATransform3D twoTransform = CATransform3DMakeRotation(M_PI/3, 0, 1, 0);
[self creatLayerWithX:positionX+150 Y:positionY Z:86 andTransform:twoTransform];
CATransform3D threeTransform = CATransform3DMakeRotation(-M_PI/3, 0, 1, 0);
[self creatLayerWithX:positionX-150 Y:positionY Z:86 andTransform:threeTransform];
CATransform3D fourTransform = CATransform3DMakeRotation(M_PI*2/3, 0, 1, 0);
[self creatLayerWithX:positionX+150 Y:positionY Z:-86 andTransform:fourTransform];
CATransform3D fiveTransform = CATransform3DMakeRotation(-M_PI*2/3, 0, 1, 0);
[self creatLayerWithX:positionX-150 Y:positionY Z:-86 andTransform:fiveTransform];
CATransform3D sixTransform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
[self creatLayerWithX:positionX Y:positionY Z:-173 andTransform:sixTransform];
//添加動畫
CATransform3D transA = CATransform3DMakeRotation(M_PI/3, 0, 1, 0);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.duration = 3;
animation.repeatCount = HUGE_VALF;
animation.toValue = [NSValue valueWithCATransform3D:transA];
[self.transformLayer addAnimation:animation forKey:nil];
CATransformLayer的使用就簡單的說這些吧褥琐, 關(guān)于翻頁這樣的立體效果,使用CATransform3D能夠更方便的實現(xiàn)颈抚,CATransform3D相關(guān)的內(nèi)容多看多練習(xí)就能夠自如應(yīng)用了踩衩。
參考鏈接:
https://www.cnblogs.com/zhouxihi/p/6290495.html
http://www.reibang.com/p/31edd92a7f76