高級動(dòng)畫學(xué)習(xí)心得筆記(三)圖層幾何學(xué)

3.圖層幾何學(xué)

3.1布局

UIView:? frame? ? bounds? center

CALayer:frame? ? bounds? position? anchorPoint

圖層中的position對應(yīng)視圖的center,代表同樣的值與含義峻凫,都代表了相對于父圖層anchorPoint所在的位置

當(dāng)對圖層做變換的時(shí)候蒂教,比如旋轉(zhuǎn),frame代表了覆蓋在圖層旋轉(zhuǎn)之后的整個(gè)軸對齊的矩形區(qū)域赫舒,也就是說frame的寬高可能和bounds不一致了

3.2錨點(diǎn)

anchorPoint點(diǎn)(錨點(diǎn))的值是用相對bounds的比例值來確定的,anchorPoint默認(rèn)位于圖層中心點(diǎn),即{0.5,0.5},anchorPoint也使用的單位坐標(biāo)奈搜,加入將anchorPoint放在左上角,即{0,0}盯荤,那么圖層將會(huì)向右下角的position方向移動(dòng)

視圖的center屬性和圖層position屬性都指定了anchorPoint相對于父圖層的位置媚污,圖層的anchorPoint通過position來控制它的frame位置,可以認(rèn)為anchorPoint是用來移動(dòng)視圖圖層的句柄

我們創(chuàng)建了一個(gè)layerView廷雅,通過改變它的anchorPoint(從默認(rèn)的{0.5耗美,0.5}到{0,0})來觀察其它的變化

++++++++++frame:{{20, 20}, {100, 200}},-----bounds:{{0, 0}, {100, 200}},+++++++++layer.frame:{{20, 20}, {100, 200}},----------layer.bounds:{{0, 0}, {100, 200}},++++++++center.x:70.000000,-------center.y:120.000000,++++++++++position.x:70.000000,----------position.y:120.000000,+++++++++anchorPoint.x:0.500000,---------anchorPoint.y:0.500000

第二次++++++++++frame:{{70, 120}, {100, 200}},-----bounds:{{0, 0}, {100, 200}},+++++++++layer.frame:{{70, 120}, {100, 200}},----------layer.bounds:{{0, 0}, {100, 200}},++++++++center.x:70.000000,-------center.y:120.000000,++++++++++position.x:70.000000,----------position.y:120.000000,+++++++++anchorPoint.x:0.000000,---------anchorPoint.y:0.000000

如上數(shù)據(jù)航缀,我們可以看出center和position都是視圖圖層的anchorPoint在父視圖圖層中的位置商架,單獨(dú)改變anchorPoint,視圖的frame改變芥玉,而center和position保持原位置不變

anchorPoint常常用于動(dòng)畫中改變視圖的transform蛇摸,改變anchorPoint之后,視圖會(huì)圍繞anchorPoint來旋轉(zhuǎn)

anchorPoint灿巧、position赶袄、frame之間的相對關(guān)系.

? frame中的X,Y表示sublayer左上角相對于supLayer的左上角的距離

? position中的X,Y表示sublay錨點(diǎn)相對于supLayer的左上角的距離

? anchorPoint中的X,Y表示錨點(diǎn)的x,y的相對距離比例值

當(dāng)確定錨點(diǎn),改變frame時(shí), position的值為:

position.x = frame.origin.x + anchorPoint.x * bounds.size.width揽涮;

position.y = frame.origin.y + anchorPoint.y * bounds.size.height;

確定錨點(diǎn), 改變position時(shí), frame的值為:

frame.origin.x = position.x - anchorPoint.x * bounds.size.width饿肺;

frame.origin.y = position.y - anchorPoint.y * bounds.size.height蒋困;

改變錨點(diǎn), frame的值變化為

frame.origin.x = - anchorPoint.x * bounds.size.width + position.x;

frame.origin.y = - anchorPoint.y * bounds.size.height + position.y敬辣;

影響關(guān)系

? 錨點(diǎn)改變, position不影響, frame變化

? frame變化, 錨點(diǎn)不影響, position變化

? position變化, 錨點(diǎn)不影響, frame變化

3.3坐標(biāo)系

3.3.1 坐標(biāo)系

和視圖一樣雪标,圖層在圖層樹當(dāng)中也是相對于父圖層按層級關(guān)系放置,一個(gè)圖層的position依賴于它父圖層的bounds溉跃,如果父圖層發(fā)生移動(dòng)村刨,所有子圖層也會(huì)跟著移動(dòng)

如果要知道一個(gè)圖層的絕對位置,或者是相對于另一個(gè)圖層的位置撰茎,那么可以使用以下方法:

- (CGPoint)convertPoint:(CGPoint)point fromLayer:(CALayer *)layer;

- (CGPoint)convertPoint:(CGPoint)point toLayer:(CALayer *)layer;

- (CGRect)convertRect:(CGRect)rect fromLayer:(CALayer *)layer;

- (CGRect)convertRect:(CGRect)rect toLayer:(CALayer *)layer;

這些方法可以把定義在一個(gè)圖層坐標(biāo)系下的點(diǎn)或者矩形轉(zhuǎn)換成另一個(gè)圖層坐標(biāo)系下的點(diǎn)或者矩形

3.3.2 翻轉(zhuǎn)的幾何結(jié)構(gòu)

常規(guī)來講嵌牺,ios中,一個(gè)圖層的position位于父圖層的左上角龄糊,OS中髓梅,是位于左下角,CALayer有一個(gè)geometryFlipped屬性绎签,如果設(shè)置為YES枯饿,那么此視圖的排版方式將垂直翻轉(zhuǎn),如ios中诡必,某layer的geometryFlipped屬性設(shè)置為YES奢方,那么它將會(huì)相對于左下角排列

3.3.3 Z坐標(biāo)軸

和UIView不同,CALayer處于一個(gè)三維空間當(dāng)中爸舒,除了position和anchorPoint之外蟋字,還有zPosition和anchorPointZ這兩個(gè)屬性,它們都是在Z軸上描述圖層位置的浮點(diǎn)類型

zPosition主要用于在三維空間移動(dòng)和旋轉(zhuǎn)圖層扭勉,除此之外鹊奖,zPosition最實(shí)用的功能就是改變圖層的顯示順序了

我們繪制圖層時(shí),默認(rèn)都是先繪制的顯示在底層涂炎,如果希望先繪制的顯示在前面忠聚,那么可以增加zPosition的值,它就會(huì)顯示在前面了

3.4 Hit Testing

CALayer并不關(guān)心任何響應(yīng)鏈?zhǔn)录罚圆荒苤苯犹幚碛|摸事件或者手勢两蟀。但是它有一系列的方法幫你處理事件

-(BOOL)containsPoint:(CGPoint)point;

-(CALayer *)hitTest:(CGPoint)point;

containsPoint:接受一個(gè)在本土曾坐標(biāo)系下的CGPoint參數(shù),如果這個(gè)點(diǎn)在圖層的frame內(nèi)增返回就返回YES震缭,一般用于在UIView的TouchBegan方法中對圖層的坐標(biāo)進(jìn)行判斷赂毯,然后處理需要的結(jié)果

hitTest:對應(yīng)UIView中的hitTest:withEvent:方法,相對應(yīng)的,hitTest:withEvent:返回的是一個(gè)當(dāng)前視圖或者其子視圖接受觸摸事件的UIView對象党涕,hitTest:則返回圖層本身或者其子圖層對象烦感,相同的是倾鲫,如果這個(gè)點(diǎn)在圖層范圍之外欧引,則返回nil,這兩個(gè)方法都可以直接調(diào)用耿导,也可以重寫骑祟,在不同情境下使用以滿足不同的需求

注意:-hitTest:方法的測算順序嚴(yán)格依賴于圖層樹當(dāng)中的圖層順序(和UIView處理事件類似),之前提到的zPosition屬性可以改變屏幕上圖層的顯示順序气笙,但不能改變事件傳遞的順序次企。這意味著吐過改變了圖層的z軸順序,你會(huì)發(fā)現(xiàn)將不能檢測到最前方的視圖點(diǎn)擊事件潜圃,這是因?yàn)楸涣硪粋€(gè)圖層遮蓋住了缸棵,雖然他的zPosition值嬌小,但是在圖層樹中的順序靠前谭期。

3.5自動(dòng)布局

UIView中堵第,可以使用UIViewAutoresizingMask或者AutoLayout來實(shí)現(xiàn)自動(dòng)布局.

在Mac OS平臺(tái),CALayer有一個(gè)叫做layoutManager的屬性可以通過CALayoutManager協(xié)議和CAConstraintLayoutManager類來實(shí)現(xiàn)自動(dòng)排版隧出,但是它們在ios上并不適用

如果希望手工操作CALayer的布局踏志,在ios中只能使用CALayerDelegate的函數(shù):

-(void)layoutSubLayersOfLayer:(CALayer *)layer.

當(dāng)圖層的bounds發(fā)生改變,或者圖層的-setNeedsLayout方法被調(diào)用的時(shí)候胀瞪,這個(gè)函數(shù)將會(huì)被執(zhí)行针余。這使得你可以手動(dòng)地重新擺放或者重新調(diào)整子圖層的大小,但是不能像UIView的autoresizingMask好Constraints屬性可以做到自適應(yīng)屏幕旋轉(zhuǎn)凄诞。

這也是為什么最好使用視圖而不是單獨(dú)的圖層來構(gòu)建應(yīng)用程序的另一個(gè)重要原因之一圆雁。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市帆谍,隨后出現(xiàn)的幾起案子伪朽,更是在濱河造成了極大的恐慌,老刑警劉巖汛蝙,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件烈涮,死亡現(xiàn)場離奇詭異,居然都是意外死亡窖剑,警方通過查閱死者的電腦和手機(jī)跃脊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苛吱,“玉大人酪术,你說我怎么就攤上這事。” “怎么了绘雁?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵橡疼,是天一觀的道長。 經(jīng)常有香客問我庐舟,道長欣除,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任挪略,我火速辦了婚禮历帚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘杠娱。我一直安慰自己挽牢,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布摊求。 她就那樣靜靜地躺著禽拔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪室叉。 梳的紋絲不亂的頭發(fā)上睹栖,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天,我揣著相機(jī)與錄音茧痕,去河邊找鬼野来。 笑死,一個(gè)胖子當(dāng)著我的面吹牛踪旷,可吹牛的內(nèi)容都是我干的梁只。 我是一名探鬼主播,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼埃脏,長吁一口氣:“原來是場噩夢啊……” “哼搪锣!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起彩掐,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤构舟,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后堵幽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狗超,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年朴下,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了努咐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,001評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡殴胧,死狀恐怖渗稍,靈堂內(nèi)的尸體忽然破棺而出佩迟,到底是詐尸還是另有隱情,我是刑警寧澤竿屹,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布报强,位于F島的核電站,受9級特大地震影響拱燃,放射性物質(zhì)發(fā)生泄漏秉溉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一碗誉、第九天 我趴在偏房一處隱蔽的房頂上張望召嘶。 院中可真熱鬧,春花似錦哮缺、人聲如沸弄跌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碟绑。三九已至俺猿,卻和暖如春茎匠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背押袍。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工诵冒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谊惭。 一個(gè)月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓汽馋,卻偏偏與公主長得像,于是被迫代替她去往敵國和親圈盔。 傳聞我的和親對象是個(gè)殘疾皇子豹芯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評論 2 355

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