iOS形變之CATransform3D

CATransform3D.png
概述

CATransform3D是一個用于處理3D形變的類,其可以改變控件的平移、縮放、旋轉(zhuǎn)、斜交等,其坐標(biāo)系統(tǒng)采用的是三維坐標(biāo)系,即向右為x軸正方向,向下為y軸正方向,垂直屏幕向外為z軸正方向

在CALayer中有一個transform屬性便是專門用來控制3D形變的,其使用方法如下

樣例素材

在介紹CALayer形變的過程中,我們會使用一個UIImageView圖片為例,對各動畫效果進(jìn)行演示

@property (nonatomic, strong) UIImageView *demoImageView;

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.demoImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, [[UIScreen mainScreen] bounds].size.width-40, [[UIScreen mainScreen] bounds].size.height-40)];
    self.demoImageView.image = [UIImage imageNamed:@"demo"];
    [self.view addSubview:self.demoImageView];
}
方法介紹
  • CATransform3DMakeTranslation實(shí)現(xiàn)以初始位置為基準(zhǔn),在x軸方向上平移x單位,在y軸方向上平移y單位,在z軸方向上平移z單位
// 格式
CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)
// 樣例
self.demoImageView.layer.transform = CATransform3DMakeTranslation(100, 100, 0);

注: 注: 當(dāng)tx為正值時,會向x軸正方向平移,反之,則向x軸負(fù)方向平移;當(dāng)ty為正值時,會向y軸正方向平移,反之,則向y軸負(fù)方向平移;當(dāng)tz為正值時,會向z軸正方向平移,反之,則向z軸負(fù)方向平移

  • CATransform3DMakeScale實(shí)現(xiàn)以初始位置為基準(zhǔn),在x軸方向上縮放x倍,在y軸方向上縮放y倍,在z軸方向上縮放z倍
// 格式
CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz)
// 樣例
self.demoImageView.layer.transform = CATransform3DMakeScale(2, 0.5, 1);

注: 當(dāng)sx為正值時,會在x軸方向上縮放x倍,反之,則在縮放的基礎(chǔ)上沿著豎直線翻轉(zhuǎn);當(dāng)sy為正值時,會在y軸方向上縮放y倍,反之,則在縮放的基礎(chǔ)上沿著水平線翻轉(zhuǎn)

  • CATransform3DMakeRotation實(shí)現(xiàn)以初始位置為基準(zhǔn),在x軸,y軸,z軸方向上時針旋轉(zhuǎn)angle弧度(弧度=π/180×角度,M_PI弧度代表180角度),x,y,z三個參數(shù)只分是否為0
// 格式
CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
// 樣例
self.demoImageView.layer.transform = CATransform3DMakeRotation(M_PI*0.25, 0, 0, 1);

注: 當(dāng)x,y,z值為0時,代表在該軸方向上不進(jìn)行旋轉(zhuǎn),當(dāng)值為1時,代表在該軸方向上進(jìn)行時針旋轉(zhuǎn),當(dāng)值為-1時,代表在該軸方向上進(jìn)行時針旋轉(zhuǎn)

  • CATransform3DTranslate實(shí)現(xiàn)以一個已經(jīng)存在的形變?yōu)榛鶞?zhǔn),在x軸方向上平移x單位,在y軸方向上平移y單位,在z軸方向上平移z單位
// 格式
CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz)
// 樣例
CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1.0/500;
self.demoImageView.layer.transform = CATransform3DTranslate(transform, 0, 0, 100);
  • CATransform3DScale實(shí)現(xiàn)以一個已經(jīng)存在的形變?yōu)榛鶞?zhǔn),在x軸方向上縮放x倍,在y軸方向上縮放y倍,在z軸方向上縮放z倍
// 格式
CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)
// 樣例
CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1.0/500;
self.demoImageView.layer.transform = CATransform3DScale(transform, 2, 0.5, 1);
  • CATransform3DRotate實(shí)現(xiàn)以一個已經(jīng)存在的形變?yōu)榛鶞?zhǔn),在x軸,y軸,z軸方向上時針旋轉(zhuǎn)angle弧度(弧度=π/180×角度,M_PI弧度代表180角度),x,y,z三個參數(shù)只分是否為0
// 格式
CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
// 樣例
CATransform3D transform = CATransform3DIdentity;
transform.m34 = -1.0/500;
self.demoImageView.layer.transform = CATransform3DRotate(transform, M_PI*0.25, 1, 0, 0);
  • 特殊地,transform屬性默認(rèn)值為CATransform3DIdentity,可以在形變之后設(shè)置該值以還原到最初狀態(tài)
// 樣例
self.demoImageView.layer.transform = CATransform3DIdentity;
關(guān)于結(jié)構(gòu)體中的m34

在默認(rèn)情況下,系統(tǒng)采用正交投影,對于3D形變實(shí)際上是看不到3D效果的,在CATransform3D結(jié)構(gòu)體中有一個m34便允許我們將正交投影修改為有近大遠(yuǎn)小立體效果的透視投影,其中m34 = -1.0/z,這個z為觀察者與控件之間的距離

注: m34必須在賦值transform之前設(shè)置才會生效

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市改抡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌系瓢,老刑警劉巖阿纤,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異夷陋,居然都是意外死亡欠拾,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門骗绕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來藐窄,“玉大人,你說我怎么就攤上這事酬土【H蹋” “怎么了?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵撤缴,是天一觀的道長刹枉。 經(jīng)常有香客問我,道長屈呕,這世上最難降的妖魔是什么微宝? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮凉袱,結(jié)果婚禮上芥吟,老公的妹妹穿的比我還像新娘侦铜。我一直安慰自己专甩,他們只是感情好钟鸵,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著涤躲,像睡著了一般棺耍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上种樱,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天蒙袍,我揣著相機(jī)與錄音,去河邊找鬼嫩挤。 笑死害幅,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的岂昭。 我是一名探鬼主播以现,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼约啊!你這毒婦竟也來了邑遏?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤恰矩,失蹤者是張志新(化名)和其女友劉穎记盒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體外傅,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纪吮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了萎胰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片彬碱。...
    茶點(diǎn)故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖奥洼,靈堂內(nèi)的尸體忽然破棺而出巷疼,到底是詐尸還是另有隱情,我是刑警寧澤灵奖,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布嚼沿,位于F島的核電站,受9級特大地震影響瓷患,放射性物質(zhì)發(fā)生泄漏骡尽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一擅编、第九天 我趴在偏房一處隱蔽的房頂上張望攀细。 院中可真熱鬧箫踩,春花似錦、人聲如沸谭贪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽俭识。三九已至慨削,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間套媚,已是汗流浹背缚态。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留堤瘤,地道東北人玫芦。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像本辐,于是被迫代替她去往敵國和親桥帆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評論 2 345

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