CoreAnimation之CATransformLayer

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;
}
transformLayer.gif

這里用到的一個很重要的東西就是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];
transformAnimation.gif

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市贩汉,隨后出現(xiàn)的幾起案子驱富,更是在濱河造成了極大的恐慌,老刑警劉巖匹舞,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件褐鸥,死亡現(xiàn)場離奇詭異,居然都是意外死亡赐稽,警方通過查閱死者的電腦和手機叫榕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來姊舵,“玉大人晰绎,你說我怎么就攤上這事±ǘ。” “怎么了荞下?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我尖昏,道長仰税,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任抽诉,我火速辦了婚禮陨簇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘迹淌。我一直安慰自己河绽,他們只是感情好,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布巍沙。 她就那樣靜靜地躺著葵姥,像睡著了一般。 火紅的嫁衣襯著肌膚如雪句携。 梳的紋絲不亂的頭發(fā)上榔幸,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天,我揣著相機與錄音矮嫉,去河邊找鬼削咆。 笑死,一個胖子當著我的面吹牛蠢笋,可吹牛的內(nèi)容都是我干的拨齐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼昨寞,長吁一口氣:“原來是場噩夢啊……” “哼瞻惋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起援岩,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤歼狼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后享怀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體羽峰,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年添瓷,在試婚紗的時候發(fā)現(xiàn)自己被綠了梅屉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡鳞贷,死狀恐怖坯汤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情搀愧,我是刑警寧澤惰聂,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布凿滤,位于F島的核電站,受9級特大地震影響庶近,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜眷蚓,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一鼻种、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧沙热,春花似錦叉钥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至爵川,卻和暖如春敷鸦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背寝贡。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工扒披, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人圃泡。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓碟案,卻偏偏與公主長得像,于是被迫代替她去往敵國和親颇蜡。 傳聞我的和親對象是個殘疾皇子价说,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容